Ultimate Scroll Animation Library - Lightweight, powerful, wonderfully simple ✨
npm install usal

Ultimate Scroll Animation Library - Lightweight, powerful, wonderfully simple ✨
Works with React, Solid, Svelte, Vue, Lit, Angular, Vanilla JS and more
 
  
- 🎯 40+ animations (fade, zoom, flip with all directions)
- 📝 Text animations (split by word/letter)
- 🔢 Number counters
- 🎨 Text effects (shimmer, fluid)
- 📦 Only 8KB Gzipped
- 🚀 Zero dependencies
- ♾ 60fps performance
- 🪤 Web components supported
- 🔧 Framework agnostic
- ⚡ CDN powered by jsDelivr & Cloudflare
``html`
`bash
npm install usal
🚀 Framework Setup
$3
`jsx
import { USALProvider } from '@usal/react';
{children} ;
`$3
`jsx
import { USALProvider } from '@usal/solid';
{props.children} ;
`$3
`js
import { usal } from '@usal/svelte';
// USAL auto-initializes globally
`$3
`js
import { USALPlugin } from '@usal/vue';
createApp(App).use(USALPlugin).mount('#app');
//for Nuxt
export default defineNuxtConfig({
modules: ['@usal/vue/nuxt']
//...
`$3
`js
import { usal } from '@usal/lit';
// USAL auto-initializes globally
`$3
`js
import { USALModule } from '@usal/angular';
@Component({imports: [USALModule]})
export class AppComponent
`📐 Basic Usage
`html
Fade from bottom
Zoom in
Flip from right
`📖 Complete API Documentation or https://usal.dev/#api
🎲 Demos
📊 Packages Overview
| Package | Version |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
usal | !npm |
| @usal/react | !npm |
| @usal/solid | !npm |
| @usal/svelte | !npm |
| @usal/vue | !npm |
| @usal/lit | !npm |
| @usal/angular` | !npm || Framework | Bundle Size (gzip) | React | Vue | Angular | Svelte | Solid | Lit | Vanilla |
| -------------- | ------------------ | --------- | --------- | --------- | --------- | --------- | --------- | ------- |
| 🚀 USAL.js | ~8KB | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ |
| Motion One | Variable (~small) | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
| GSAP | ~28KB | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Anime.js v4 | ~27KB | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Lottie | ~60KB | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ✅ |
| AOS | ~8KB | ⚠️ | ⚠️ | ⚠️ | ❌ | ❌ | ❌ | ✅ |
| SAL.js | ~2.7KB | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ |
| Framework | Split (Letters/Words/Items) | Counters | Scroll Trigger | Timeline | SVG | Learning |
| ----------- | --------------------------- | --------- | -------------- | ----------- | --------- | ------------- |
| USAL.js | ✅ Core | ✅ Core | ✅ Core | ✅ Core | ❌ | Very Easy |
| Motion | ❌ | ❌ | ✅ Core | ⚠️ Variants | ✅ Core | Medium |
| GSAP | ⚠️ Plugin | ⚠️ Plugin | ✅ Plugin | ✅ Advanced | ⚠️ Plugin | Complex |
| Anime.js v4 | ✅ Core | ✅ Core | ✅ Core | ✅ Core | ✅ Core | Medium |
| Lottie | ⚠️ via AE | ⚠️ via AE | ❌ | ✅ Core | ✅ Core | Complex |
| AOS | ❌ | ❌ | ✅ Core | ❌ | ❌ | Very Easy |
| SAL.js | ❌ | ❌ | ✅ Core | ❌ | ❌ | Very Easy |
Legend:
- ✅ Native/Core support
- ⚠️ Plugin/Wrapper required
- ❌ Not supported
USAL.js was inspired by:
- AOS.js - Pioneering attribute-based animations
- SAL.js - Lightweight performance optimization
- Tailwind CSS - Utility-first naming conventions
---
MIT License © 2025 Italo Almeida (@italoalmeida0)