One function. Zero dependencies.
The animation library that replaces GSAP. Scroll, hover, click, gesture — every trigger built in. Full TypeScript. Under 20KB gzipped.
See the code. Play the result.
Every example is live — click Play to see the SDK in action.
One function. One config object. That's the entire API.
Motion() takes a name, a target, and a plain config object — from, to, duration, ease. No method chains, no class instances, no setup ceremony. The simplest animation API you've ever used.
Hundreds of elements. Cascade, wave, or randomize.
Stagger timing across any group — from center, edges, start, end, or random. Grid-aware stagger auto-detects your layout. At scale, Motion.page SDK triggers fewer browser recalcs and finishes faster than GSAP.
Split by chars, words, or lines — with one property.
Add split: "chars" to any animation and Motion.page handles the rest — DOM splitting, cleanup, accessibility. Combine with stagger and mask for cinematic text reveals.
Animate Everything
Animate SVG paths — draw, trace, and reveal.
drawSVG animates stroke-dashoffset to draw and erase SVG paths. Combine with stagger for sequential path tracing. Works with any SVG path — logos, illustrations, hand-drawn effects.
8 trigger types, fully composable
Chain .onScroll(), .onHover(), .onClick() — mix scroll-driven parallax with hover interactions in a single animation. No extra plugins.
.onScroll().onHover().onClick().onPageLoad().play().onGesture()drawSVGsplit: charsBuilt for modern stacks
ESM-first, tree-shakeable, fully typed. Works with React, Vue, Svelte, Astro, Next.js, and vanilla JS.
No jQuery, no GSAP, no external runtime. The SDK is fully self-contained — just import and go.
import { Motion } from "@motion.page/sdk"Complete type definitions for every property, easing, trigger, and callback. Autocomplete everything.
Motion<HTMLDivElement>(…)Import only what you use. ESM, IIFE, and CDN builds available. Works with every bundler and framework.
npm i @motion.page/sdk