{"id":30956066,"url":"https://github.com/italoalmeida0/usal","last_synced_at":"2025-09-11T12:07:05.822Z","repository":{"id":312907470,"uuid":"1049200330","full_name":"italoalmeida0/usal","owner":"italoalmeida0","description":"USAL.js - Ultimate Scroll Animation Library - Lightweight, powerful, wonderfully simple ✨","archived":false,"fork":false,"pushed_at":"2025-09-09T22:04:26.000Z","size":3075,"stargazers_count":37,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-10T01:03:00.904Z","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/italoalmeida0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-09-02T16:20:55.000Z","updated_at":"2025-09-09T22:04:29.000Z","dependencies_parsed_at":"2025-09-02T19:25:16.406Z","dependency_job_id":"8ad50abc-4b91-4444-a83a-9ee473f2507b","html_url":"https://github.com/italoalmeida0/usal","commit_stats":null,"previous_names":["italoalmeida0/usal"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/italoalmeida0/usal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italoalmeida0%2Fusal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italoalmeida0%2Fusal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italoalmeida0%2Fusal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italoalmeida0%2Fusal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/italoalmeida0","download_url":"https://codeload.github.com/italoalmeida0/usal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italoalmeida0%2Fusal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274632621,"owners_count":25321251,"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-09-11T02:00:13.660Z","response_time":74,"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-09-11T12:02:53.079Z","updated_at":"2025-09-11T12:07:05.812Z","avatar_url":"https://github.com/italoalmeida0.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Third Party Components"],"sub_categories":["Scroll"],"readme":"\u003cdiv align=\"center\"\u003e\n\n![Logo USAL.js](https://github.com/italoalmeida0/usal/raw/main/assets/logo.png)\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[![Powered by Cloudflare](https://img.shields.io/badge/Powered%20by-Cloudflare-orange)](https://cloudflare.com)\n[![Delivered by jsDelivr](https://img.shields.io/badge/Delivered%20by-jsDelivr-blue)](https://jsdelivr.com)\n[![Available on npm](https://img.shields.io/badge/Available%20on-npm-red)](https://npmjs.com/package/usal)\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\nexport default defineNuxtConfig({\nmodules: ['@usal/vue/nuxt']\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/italoalmeida0/usal/wiki/API-Documentation) or https://usal.dev/#api\n\n## 🎲 Demos\n\n![Animations](https://github.com/italoalmeida0/usal/raw/main/assets/all.gif)\n\n![Count Animations](https://github.com/italoalmeida0/usal/raw/main/assets/count.gif)\n\n![Split Animations](https://github.com/italoalmeida0/usal/raw/main/assets/split.gif)\n\n## 📊 Packages Overview\n\n| Package         | Description               | Version                                                                                                                                        |\n| --------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| `usal`          | Core library (Vanilla JS) | ![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`   | React integration         | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Freact\u0026color=grey)                                                                                |\n| `@usal/solid`   | Solid integration         | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fsolid\u0026color=blue)                                                                                |\n| `@usal/svelte`  | Svelte integration        | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fsvelte\u0026color=orange)                                                                             |\n| `@usal/vue`     | Vue integration           | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Fvue\u0026color=green)                                                                                 |\n| `@usal/lit`     | Lit integration           | ![npm](https://badge.usal.dev/?nn\u0026p=%40usal%2Flit\u0026color=cyan)                                                                                  |\n| `@usal/angular` | Angular integration       | ![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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaloalmeida0%2Fusal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitaloalmeida0%2Fusal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaloalmeida0%2Fusal/lists"}