{"id":29222836,"url":"https://github.com/agusmade/animbase","last_synced_at":"2025-07-22T10:37:31.743Z","repository":{"id":284771141,"uuid":"956006657","full_name":"agusmade/animbase","owner":"agusmade","description":"Declarative animation engine","archived":false,"fork":false,"pushed_at":"2025-04-18T22:13:34.000Z","size":3861,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T04:07:09.525Z","etag":null,"topics":["animation","css","declarative","ease","easing-functions","lightweight","motion-tweening"],"latest_commit_sha":null,"homepage":"https://agusmade.github.io/animbase/","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/agusmade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2025-03-27T14:48:34.000Z","updated_at":"2025-04-25T03:44:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"3766c4ae-6666-49a8-a969-95d7441fec22","html_url":"https://github.com/agusmade/animbase","commit_stats":null,"previous_names":["agusmade/animbase"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/agusmade/animbase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agusmade%2Fanimbase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agusmade%2Fanimbase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agusmade%2Fanimbase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agusmade%2Fanimbase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agusmade","download_url":"https://codeload.github.com/agusmade/animbase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agusmade%2Fanimbase/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265311871,"owners_count":23745161,"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","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","declarative","ease","easing-functions","lightweight","motion-tweening"],"created_at":"2025-07-03T04:07:02.093Z","updated_at":"2025-07-14T15:07:28.714Z","avatar_url":"https://github.com/agusmade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AnimBase\n\n[![npm](https://img.shields.io/npm/v/animbase)](https://www.npmjs.com/package/animbase)\n[![install size](https://packagephobia.com/badge?p=animbase)](https://packagephobia.com/result?p=animbase)\n[![bundlephobia](https://img.shields.io/bundlephobia/minzip/animbase)](https://bundlephobia.com/package/animbase)\n[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/agusmade/animbase/blob/main/LICENSE)\n[![gh-pages](https://img.shields.io/badge/demo-gh--pages-orange)](https://agusmade.github.io/animbase/)\n\n**The declarative animation engine** – Animate HTML elements using only `data-*` attributes. No custom JavaScript required.\n\n## ✨ Features\n\n-   🔧 **Fully declarative** via `data-anim-init` and `data-anim-config`\n-   🎮 **Frame-based timeline**\n-   🎨 Supports numeric values and colors\n-   ⚡ Per-subvalue easing (e.g., `transform: translateY(20px.out)`, `color: #00f.out`)\n-   🧠 Detects and interpolates each number or color in a single property (e.g., `box-shadow`, `filter`, `transform`, `outline`, etc.)\n-   🎯 Multiple timeline sources (2 types):\n    -   external-controlled (scroll, input range, other)\n    -   triggered timer (looping or one-shot)\n-   🔂 Triggered animation with runtime control API\n-   ⏰ Playback control: trigger, pause, resume, stop, seek\n-   🔁 Direction control with `reverse`\n-   ☝️ Play-once support with `once`\n-   🪝 Hooks: `onStart` and `onFinish`\n-   🧩 Easy to extend and integrate\n\n---\n\n## 🚀 Installation\n\n### Using NPM\n\n```bash\nnpm install animbase\n```\n\nThen import manually:\n\n```js\nimport AnimBase from 'animbase';\n```\n\n### Using CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/animbase@1.1.2/dist/animbase.iife.min.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## 🧭 Quick Start\n\n### 1. Include the script\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/animbase@1.1.2/dist/animbase.iife.min.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Add animated element using one of two animation modes:\n\n#### A. External-Controlled Animator\n\nThese use `data-anim-controller-ref` and/or `data-anim-controlled-by`.\n\n```html\n\u003cinput type=\"range\" id=\"range\" min=\"0\" max=\"100\" /\u003e\n\u003cdiv\n\tdata-anim-controller-ref=\"#range\"\n\tdata-anim-controlled-by=\"value\"\n\tdata-anim-init='{\"opacity\": \"0\"}'\n\tdata-anim-config='{\"100\": {\"opacity\": \"1\"}}'\n\u003e\u003c/div\u003e\n\n\u003c!-- Or using scrollY on window --\u003e\n\u003cdiv\n\tdata-anim-controlled-by=\"scrollY\"\n\tdata-anim-init='{\"transform\": \"translateY(100px.out)\"}'\n\tdata-anim-config='{\"200\": {\"transform\": \"translateY(0px.out)\"}}'\n\u003e\u003c/div\u003e\n```\n\n-   `data-anim-controller-ref`: selector of the controlling element (default: `window`)\n-   `data-anim-controlled-by`: property to read (e.g. `value`, `scrollTop`, `scrollLeft`)\n-   `data-anim-listen` (optional): event to listen (e.g. `input`, `scroll`, `timeupdate`, etc.)\n\nDefault behavior:\n\n-   If only `data-anim-controller-ref` → property defaults to `value`, listens to `input`\n-   If only `data-anim-controlled-by` → target defaults to `window`, uses common scroll events\n\n#### B. Timed Animator\n\n```html\n\u003c!-- Config element (required once per group) --\u003e\n\u003cdiv\n\tdata-anim-trigger-group=\"hero\"\n\tdata-anim-trigger-config='{\"speed\": 60, \"once\": false, \"reverse\": false, \"autostart\": true}'\n\u003e\u003c/div\u003e\n\n\u003c!-- Animated element(s) --\u003e\n\u003cdiv data-anim-init='{\"opacity\": \"0\"}' data-anim-config='{\"100\": {\"opacity\": \"1\"}}' data-anim-trigger-group=\"hero\"\u003e\u003c/div\u003e\n\n\u003c!-- Optional JS control --\u003e\n\u003cscript\u003e\n\tAnimBase.trigger('hero');\n\u003c/script\u003e\n```\n\n\u003e Group config should be placed on a separate, non-animated element.\n\n---\n\n## 📚 Documentation\n\nAPI reference and usage guide:  \n👉 [https://agusmade.github.io/animbase/docs](https://agusmade.github.io/animbase/docs)\n\n---\n\n## 🎨 Demo Gallery\n\nExplore live demos of AnimBase in action:  \n👉 [https://agusmade.github.io/animbase/demo](https://agusmade.github.io/animbase/demo)\n\nIncludes coverflow, book flips, 3D cards, scroll animations, and more.\n\n--\n\n## 📁 Builds\n\nAnimBase includes multiple builds:\n\n| File                      | Type       | Notes                     |\n| ------------------------- | ---------- | ------------------------- |\n| `animbase.esm.js`         | ESM        | For modern bundlers       |\n| `animbase.cjs.js`         | CommonJS   | For Node or legacy tools  |\n| `animbase.iife.js`        | IIFE       | Non-minified global build |\n| `animbase.iife.min.js`    | IIFE (min) | Production CDN use        |\n| `animbase-core-only.*.js` | Core only  | Excludes auto-init logic  |\n\n\u003e ⚠️ Source maps are not included in the npm package to keep it lightweight.\n\n---\n\n## 🧠 How AnimBase Works (Summary)\n\nAnimBase lets you define powerful animations **entirely using HTML attributes** — no JavaScript required for most cases.\n\nIt works by parsing two key attributes:\n\n### 1. `data-anim-init`\n\nDefines the **initial styles** of the element as a JSON string.\n\n```html\ndata-anim-init='{\"opacity\": \"0\", \"transform\": \"scale(0.5)\"}'\n```\n\n### 2. `data-anim-config`\n\nDefines a **timeline of keyframes**, where each key (frame number) maps to a style change. Values are interpolated over time.\n\n```html\ndata-anim-config='{ \"500\": {\"opacity\": \"1.out\", \"transform\": \"scale(1.spring)\"} }'\n```\n\n### ✨ Per-Value Easing\n\nEach variable inside a value string (e.g. `5rem.outQuad`) can have **its own easing**. AnimBase parses:\n\n-   Numbers: `100`, `50px`, `-2.5rem`, `10%`\n-   Colors: `#fff`, `#5bf.outBounce`\n-   Easing functions: `linear`, `spring`, `outQuad`, etc.\n\n### ⚙️ Example\n\n```html\n\u003cdiv\n\tdata-anim-init='{\"boxShadow\": \"1px -2.5rem 10% #5bf\"}'\n\tdata-anim-config='{\"300\": {\"boxShadow\": \"3px 5rem.in 10% #fa2.outBounce\"}}'\n\u003e\n\tAnimBase\n\u003c/div\u003e\n```\n\nEach variable animates independently with its own easing. AnimBase **matches variables by position**, so value structure must stay consistent across keyframes.\n\n👉 Want more details? See the [full explanation here](https://agusmade.github.io/animbase/docs/how-it-works.html)\n\n---\n\n## 💪 Advanced API (for `trigger-group` only)\n\n```js\nAnimBase.trigger('group'); // Start animation\nAnimBase.pause('group'); // Pause\nAnimBase.resume('group'); // Resume\nAnimBase.stop('group'); // Stop and reset\nAnimBase.seek('group', 50); // Jump to frame 50\nAnimBase.setReverse('group', true); // Reverse playback\nAnimBase.setOnce('group', true); // Play once only\n\nAnimBase.setHooks('group', {\n\tonStart: () =\u003e console.log('Started'),\n\tonFinish: () =\u003e console.log('Finished'),\n});\n\n// Add element programmatically\nAnimBase.getAnimator('group').addElement(domElement, {init, config});\n```\n\n---\n\n## 📆 License\n\nMIT\n\n---\n\n🎉 Check out the [live demos](https://agusmade.github.io/animbase/) to see AnimBase in action, or integrate it into your next web creation!\n\n🔗 GitHub: [github.com/agusmade/animbase](https://github.com/agusmade/animbase)  \n📦 NPM: [npmjs.com/package/animbase](https://www.npmjs.com/package/animbase)\n\n---\n\n👋 AnimBase is open-source and ready to grow with your creativity.  \nContribute, suggest features, or just say hi!\n\nMade with ❤️ by Agus Made\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagusmade%2Fanimbase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagusmade%2Fanimbase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagusmade%2Fanimbase/lists"}