Quick start

Import initAnimations once your DOM is ready. From then on, everything is class-driven: add a utility class to an element and it animates - no per-element JS, no config files.

Javascript React Vue Svelte Next.js Vite Angular Nuxt Astro SvelteKit Solid Qwik Remix Lit Preact

Your first animation

Press Replay to remove and re-insert the box below - the engine watches the DOM for .appear elements and plays their entrance each time they mount.

.appear.scroll.spawn-up

Class anatomy: behaviour (.spawn-up) + trigger (.scroll, .appear) + tunables (.time-1, .ease-back, .priority-2). Combine freely - order in class does not matter.