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	Description	Version
usal	Core library (Vanilla JS)
@usal/react	React integration
@usal/solid	Solid integration
@usal/svelte	Svelte integration
@usal/vue	Vue integration
@usal/lit	Lit integration
@usal/angular	Angular integration

📈 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)