{"id":31659521,"url":"https://github.com/usaljs/usal","last_synced_at":"2025-10-07T16:04:54.321Z","repository":{"id":312907470,"uuid":"1049200330","full_name":"usaljs/usal","owner":"usaljs","description":"USAL.js - Ultimate Scroll Animation Library - Lightweight, powerful, wonderfully simple ✨","archived":false,"fork":false,"pushed_at":"2025-10-03T09:42:47.000Z","size":5691,"stargazers_count":106,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T15:33:27.147Z","etag":null,"topics":["animation","css-animations","intersection-observer","javascript","scroll-animations","scroll-library","web-animation"],"latest_commit_sha":null,"homepage":"https://usal.dev/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usaljs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"italoalmeida0"}},"created_at":"2025-09-02T16:20:55.000Z","updated_at":"2025-10-03T18:53:05.000Z","dependencies_parsed_at":"2025-09-02T19:25:16.406Z","dependency_job_id":"8ad50abc-4b91-4444-a83a-9ee473f2507b","html_url":"https://github.com/usaljs/usal","commit_stats":null,"previous_names":["italoalmeida0/usal","usaljs/usal"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/usaljs/usal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usaljs%2Fusal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usaljs%2Fusal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usaljs%2Fusal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usaljs%2Fusal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usaljs","download_url":"https://codeload.github.com/usaljs/usal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usaljs%2Fusal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278802815,"owners_count":26048572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css-animations","intersection-observer","javascript","scroll-animations","scroll-library","web-animation"],"created_at":"2025-10-07T16:01:48.925Z","updated_at":"2025-10-07T16:04:54.316Z","avatar_url":"https://github.com/usaljs.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" \n            srcset=\"https://raw.githubusercontent.com/usaljs/usal/refs/heads/main/assets/brand/usal_logo_dark.svg\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/usaljs/usal/refs/heads/main/assets/brand/usal_logo.svg\" alt=\"USAL.js\"\u003e\n  \u003c/picture\u003e\n  \u003cpicture\u003e\n    \u003cimg width=\"144\" height=\"144\" src=\"https://raw.githubusercontent.com/usaljs/usal/refs/heads/main/assets/brand/usal_icon_512.webp\" alt=\"⚡\"\u003e\n  \u003c/picture\u003e\n\n**Ultimate Scroll Animation Library - Lightweight, powerful, wonderfully simple ✨**\n\n**Works with React, Solid, Svelte, Vue, Lit, Angular, Vanilla JS and more**\n\n**[\u003e usal.dev/](https://usal.dev/)**\n\n[![Available On NPM](https://badgers.space/badge/AVAILABLE%20ON/NPM/red?icon=cssgg-npm\u0026theme=tailwind)](https://npmjs.com/package/usal) [![Join The Community](https://badgers.space/badge/JOIN%20THE%20COMMUNITY/DISCORD/black?icon=feather-message-circle\u0026theme=tailwind)](https://discord.usal.dev/)\n\n[![Powered by Cloudflare](https://badgers.space/badge/POWERED%20BY/CLOUDFLARE/orange?icon=feather-cloud-lightning\u0026theme=tailwind)](https://www.cloudflare.com/) [![Delivered By JsDelivr](https://badgers.space/badge/DELIVERED%20BY/JSDELIVR/blue?icon=feather-download-cloud\u0026theme=tailwind)](https://jsdelivr.com) [![Sponsor](https://badgers.space/badge/BECOMING%20A/SPONSOR/pink?icon=feather-heart\u0026theme=tailwind)](https://github.com/sponsors/italoalmeida0)\n\n\u003c/div\u003e\n\n## ✨ Features\n\n- 🎯 **40+ animations** (fade, zoom, flip with all directions)\n- 📝 **Text animations** (split by word/letter)\n- 🔢 **Number counters**\n- 🎨 **Text effects** (shimmer, fluid)\n- 📦 **Only 8KB Gzipped**\n- 🚀 **Zero dependencies**\n- ♾ **60fps performance**\n- 🪤 **Web components supported**\n- 🔧 **Framework agnostic**\n- ⚡ **CDN powered** by jsDelivr \u0026 Cloudflare\n\n## 📦 Installation\n\n### CDN (Quickstart)\n\n```html\n\u003cscript src=\"https://cdn.usal.dev/latest\"\u003e\u003c/script\u003e\n```\n\n### NPM\n\n```bash\nnpm install usal\n\n# Framework-specific packages\nnpm install @usal/react   # For React/Next.js\nnpm install @usal/solid   # For Solid/SolidStart\nnpm install @usal/svelte   # For Svelte/SvelteKit\nnpm install @usal/vue   # For Vue/Nuxt\nnpm install @usal/lit   # For Lit\nnpm install @usal/angular   # For Angular\n```\n\n## 🚀 Framework Setup\n\n### ⬛ React (Next.js)\n\n```jsx\nimport { USALProvider } from '@usal/react';\n\u003cUSALProvider\u003e{children}\u003c/USALProvider\u003e;\n```\n\n### 🟦 Solid (SolidStart)\n\n```jsx\nimport { USALProvider } from '@usal/solid';\n\u003cUSALProvider\u003e{props.children}\u003c/USALProvider\u003e;\n```\n\n### 🟧 Svelte (SvelteKit)\n\n```js\nimport { usal } from '@usal/svelte';\n// USAL auto-initializes globally\n```\n\n### 🟩 Vue (Nuxt)\n\n```js\nimport { USALPlugin } from '@usal/vue';\ncreateApp(App).use(USALPlugin).mount('#app');\n//for Nuxt\nexport default defineNuxtConfig({\nmodules: ['@usal/vue/nuxt']\n//...\n```\n\n### 🟪 Lit\n\n```js\nimport { usal } from '@usal/lit';\n// USAL auto-initializes globally\n```\n\n### 🟥 Angular\n\n```js\nimport { USALModule } from '@usal/angular';\n@Component({imports: [USALModule]})\nexport class AppComponent\n```\n\n## 📐 Basic Usage\n\n```html\n\u003c!-- Simple animation --\u003e\n\u003cdiv data-usal=\"fade-u\"\u003eFade from bottom\u003c/div\u003e\n\n\u003c!-- With modifiers --\u003e\n\u003cdiv data-usal=\"zoomin duration-800 delay-200\"\u003eZoom in\u003c/div\u003e\n\n\u003c!-- Complex animation --\u003e\n\u003cdiv data-usal=\"flip-r delay-500 blur once\"\u003eFlip from right\u003c/div\u003e\n```\n\n## [📖 Complete API Documentation](https://github.com/usaljs/usal/wiki/API-Documentation) or https://usal.dev/#api\n\n## 🎲 Demos\n\n![Animations](https://github.com/usaljs/usal/raw/main/assets/all.gif)\n\n![Text Animations](https://github.com/usaljs/usal/raw/main/assets/text.gif)\n\n![Count Animations](https://github.com/usaljs/usal/raw/main/assets/count.gif)\n\n![Split Animations](https://github.com/usaljs/usal/raw/main/assets/split.gif)\n\n## 📊 Packages Overview\n\n| Package         | Version                                                                                                                                        |\n| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| `usal`          | ![npm](https://badge.usal.dev/?nn\u0026ps=%40usal%2Freact%2C%40usal%2Fsolid%2C%40usal%2Fsvelte%2C%40usal%2Fvue%2C%40usal%2Flit%2C%40usal%2Fangular) |\n| `@usal/react`   | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Freact\u0026color=grey)                                                                                |\n| `@usal/solid`   | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fsolid\u0026color=blue)                                                                                |\n| `@usal/svelte`  | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fsvelte\u0026color=orange)                                                                             |\n| `@usal/vue`     | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fvue\u0026color=green)                                                                                 |\n| `@usal/lit`     | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Flit\u0026color=cyan)                                                                                  |\n| `@usal/angular` | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fangular\u0026color=red)                                                                               |\n\n## 📈 JavaScript Animation Frameworks Comparison (2025)\n\n### Performance \u0026 Size Comparison\n\n| Framework      | Bundle Size (gzip) | React     | Vue       | Angular   | Svelte    | Solid     | Lit       | Vanilla |\n| -------------- | ------------------ | --------- | --------- | --------- | --------- | --------- | --------- | ------- |\n| **🚀 USAL.js** | **~8KB**           | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅      |\n| Motion One     | Variable (~small)  | ✅        | ✅        | ❌        | ❌        | ❌        | ❌        | ✅      |\n| GSAP           | ~28KB              | ✅        | ✅        | ✅        | ✅        | ✅        | ✅        | ✅      |\n| Anime.js v4    | ~27KB              | ✅        | ✅        | ✅        | ✅        | ✅        | ✅        | ✅      |\n| Lottie         | ~60KB              | ⚠️        | ⚠️        | ⚠️        | ⚠️        | ⚠️        | ⚠️        | ✅      |\n| AOS            | ~8KB               | ⚠️        | ⚠️        | ⚠️        | ❌        | ❌        | ❌        | ✅      |\n| SAL.js         | ~2.7KB             | ❌        | ❌        | ❌        | ❌        | ❌        | ❌        | ✅      |\n\n### Feature Comparison\n\n| Framework   | Split (Letters/Words/Items) | Counters  | Scroll Trigger | Timeline    | SVG       | Learning      |\n| ----------- | --------------------------- | --------- | -------------- | ----------- | --------- | ------------- |\n| **USAL.js** | ✅ Core                     | ✅ Core   | ✅ Core        | ✅ Core     | ❌        | **Very Easy** |\n| Motion      | ❌                          | ❌        | ✅ Core        | ⚠️ Variants | ✅ Core   | Medium        |\n| GSAP        | ⚠️ Plugin                   | ⚠️ Plugin | ✅ Plugin      | ✅ Advanced | ⚠️ Plugin | Complex       |\n| Anime.js v4 | ✅ Core                     | ✅ Core   | ✅ Core        | ✅ Core     | ✅ Core   | Medium        |\n| Lottie      | ⚠️ via AE                   | ⚠️ via AE | ❌             | ✅ Core     | ✅ Core   | Complex       |\n| AOS         | ❌                          | ❌        | ✅ Core        | ❌          | ❌        | Very Easy     |\n| SAL.js      | ❌                          | ❌        | ✅ Core        | ❌          | ❌        | Very Easy     |\n\n**Legend:**\n\n- ✅ Native/Core support\n- ⚠️ Plugin/Wrapper required\n- ❌ Not supported\n\n## 🙏 Acknowledgments\n\nUSAL.js was inspired by:\n\n- **[AOS.js](https://github.com/michalsnik/aos)** - Pioneering attribute-based animations\n- **[SAL.js](https://github.com/mciastek/sal)** - Lightweight performance optimization\n- **[Tailwind CSS](https://tailwindcss.com)** - Utility-first naming conventions\n\n---\n\n## 📄 License\n\nMIT License © 2025 Italo Almeida ([@italoalmeida0](https://github.com/italoalmeida0))\n","funding_links":["https://github.com/sponsors/italoalmeida0"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusaljs%2Fusal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusaljs%2Fusal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusaljs%2Fusal/lists"}