Getting Started
Install via CDN or NPM and start animating in seconds.
💡 CDN
<script src="https://cdn.jsdelivr.net/npm/animbase@1.1.2/dist/animbase.iife.min.js"></script>📦 NPM
npm install animbase⚙️ Import (ESM/CommonJS)
// ESM
import AnimBase from "animbase";
// CommonJS
const AnimBase = require("animbase");🚀 Usage Examples
🎯 Slide Me
<div
data-anim-controller-ref="#slider"
data-anim-init='{"transform": "translateX(0%) rotateZ(-90deg)"}'
data-anim-config='{"100": {"transform": "translateX(200%.outQuad) rotateZ(0deg.outBounce)"}}'
>🎯 Slide Me</div>
<input type="range" min="0" max="100" value="50" id="slider">
🎬 Hello
<div
data-anim-trigger-group="hello"
data-anim-init='{"transform": "translateX(-100%) scale(0.5)", "opacity": "0"}'
data-anim-config='{"100": {"transform": "translateX(100%.spring) scale(1.outSine)", "opacity": "1.out"}}'
>🎬 Hello</div>
<button onclick="AnimBase.play('hello', {once: true})">Play</button>Curious how it works under the hood? Read the deep dive →