AnimBase documentation

Installation

💡 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");

Public API

Imperative Control

Data Attributes

Examples

Minimal Usage

Hello AnimBase 
<div
	data-anim-init='{"transform": "scale(0.5)", "opacity": "0"}'
	data-anim-config='{"100": {"transform": "scale(1.outBack)", "opacity": "1.in"}}'
>Hello AnimBase</div>

<button onclick="AnimBase.play()">Play</button>
<button onclick="AnimBase.stop()">Stop</button>

Controlled by Range Input

Fades in as slider moves 
<input type="range" id="slider" min="0" max="100" />

<div data-anim-controller-ref="#slider" data-anim-controlled-by="value"
	data-anim-init='{"opacity": "0"}'
	data-anim-config='{"100": {"opacity": "1"}}'
>Fades in as slider moves</div>

Triggered Timed Animation

This will animate on load 
<div data-anim-trigger-group="myanim"
	data-anim-init='{"transform": "translateY(100px)", "opacity": "0"}'
	data-anim-config='{"100": {"transform": "translateY(0px.outBack)", "opacity": "1.in"}}'
>This will animate on load</div>

<div data-anim-trigger-group="myanim" data-anim-trigger-config='{ "speed": 50, "autostart": true }'></div>

Scroll-Controlled with Threshold Delay

This will animate after frame 100 
<div class="example-preview scroll-area" style="overflow-y: auto; display: block; padding: 0 0; margin: 0 0">
	<div style="height: 190%; position: relative; text-align: center">
		<div
			data-anim-controlled-by="scrollTop"
			data-anim-controller-ref=".scroll-area"
			data-anim-init='{"opacity": "0", "top": "40%"}'
			data-anim-config='{"100": {}, "250": {"opacity": "1.inSine", "top": "60%"}}'
			style="position: absolute; top: 40%; width: 100%"
		>
			This will animate after frame 100
		</div>
	</div>
</div>

When using scrollable elements, you may need to animate the position (e.g., top) to keep the animated content visible during scroll. In this example, we move from top: 40% to 60%.

Multi-Element with Timeline and Easing

<div
	data-anim-trigger-group="b1"
	data-anim-init='{"opacity":"0", "top":"0px", "transform":"scale(0.5)"}'
	data-anim-config='{"100":{"opacity":"1.outSine", "top":"80px.spring", "transform":"scale(1.spring)"}, "200":{}, "300":{"opacity":"0.inSine", "top":"190px.outBounce", "transform":"scale(1.2.inSine)"}}'
	style="width: 30px; height: 30px; border-radius: 50%"
></div>
<div
	data-anim-trigger-group="b1"
	data-anim-init='{"opacity":"0", "height":"0px"}'
	data-anim-config='{"100":{"opacity":"1.outSine", "height":"80px.spring"}, "200":{},"300":{"height":"0px.spring"}}'
	style="width: 1px; top: 5px"
></div>
<div
	data-anim-trigger-group="b1"
	data-anim-init='{"opacity":"0", "left":"0%"}'
	data-anim-config='{"170":{},"205":{"opacity":"1.outSine", "left":"100%.outQuad"}}'
	style="height: 1px; top: 80px; left: -10%; width: 60px"
></div>
<div style="left: 0; top: 50%">
	<button onclick="AnimBase.play('b1', {speed:60, max:100, max:300,once:true})">Play</button>
</div>

For more examples, visit the live demo page.

Notes

See Also