Ultimate Scroll Animation Library - Lightweight, powerful, wonderfully simple ✨

Works with React, Solid, Svelte, Vue, Lit, Angular, Vanilla JS and more

> usal.dev/

✨ Features

• 🎯 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

📦 Installation

CDN (Quickstart)

<script src="https://cdn.usal.dev/latest"></script>

NPM

npm install usal

# Framework-specific packages
npm install @usal/react   # For React/Next.js
npm install @usal/solid   # For Solid/SolidStart
npm install @usal/svelte   # For Svelte/SvelteKit
npm install @usal/vue   # For Vue/Nuxt
npm install @usal/lit   # For Lit
npm install @usal/angular   # For Angular

🚀 Framework Setup

⬛ React (Next.js)

import { USALProvider } from '@usal/react';
<USALProvider>{children}</USALProvider>;

🟦 Solid (SolidStart)

import { USALProvider } from '@usal/solid';
<USALProvider>{props.children}</USALProvider>;

🟧 Svelte (SvelteKit)

import { usal } from '@usal/svelte';
// USAL auto-initializes globally

🟩 Vue (Nuxt)

import { USALPlugin } from '@usal/vue';
createApp(App).use(USALPlugin).mount('#app');
//for Nuxt
export default defineNuxtConfig({
modules: ['@usal/vue/nuxt']
//...

🟪 Lit

import { usal } from '@usal/lit';
// USAL auto-initializes globally

🟥 Angular

import { USALModule } from '@usal/angular';
@Component({imports: [USALModule]})
export class AppComponent

📐 Basic Usage

<!-- Simple animation -->
<div data-usal="fade-u">Fade from bottom</div>

<!-- With modifiers -->
<div data-usal="zoomin duration-800 delay-200">Zoom in</div>

<!-- Complex animation -->
<div data-usal="flip-r delay-500 blur once">Flip from right</div>

📖 Complete API Documentation or https://usal.dev/#api

🎲 Demos

📊 Packages Overview

| Package | Version | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | usal | | | @usal/react | | | @usal/solid | | | @usal/svelte | | | @usal/vue | | | @usal/lit | | | @usal/angular | |

📈 JavaScript Animation Frameworks Comparison (2025)

Performance & Size Comparison

| 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 | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ |

Feature Comparison

| 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

🙏 Acknowledgments

USAL.js was inspired by:

• AOS.js - Pioneering attribute-based animations
• SAL.js - Lightweight performance optimization
• Tailwind CSS - Utility-first naming conventions

📄 License

MIT License © 2025 Italo Almeida (@italoalmeida0)