SDK Documentation
Zero-dependency animation library with named timelines, triggers, and powerful utilities.
Introduction
Overview Overview of the SDK — a standalone animation engine with named timelines, triggers, and zero dependencies.
Getting Started Install the SDK, create your first animation, and understand the basic pattern.
Core Concepts Named timelines, from/to resolution, implicit values, and how the SDK works internally.
Animation Properties
Opacity Fade elements in and out with opacity animations.
Translate Move elements along X and Y axes with pixel or percentage values.
Scale Scale elements uniformly or independently on X/Y axes.
Rotation Rotate elements in 2D with degree values.
3D Transforms Rotate elements in 3D space with rotateX, rotateY, rotateZ and perspective.
Skew Distort elements with skewX and skewY shear transforms.
Dimensions Animate width and height of elements.
Colors Animate background color, text color, and border color.
Filters Apply animated blur, grayscale, brightness, contrast, and other CSS filter effects.
SVG Draw SVG strokes with DrawSVG and animate stroke and fill colors.
Clip Path Reveal and mask elements with animated CSS clip-path.
Custom Properties Animate any CSS property using custom key-value pairs and the advanced code field.
Transform Origin Set the origin point for scale, rotation, and transform animations.
Timing & Sequencing
Duration & Delay Control animation timing with duration in seconds and delay before start.
Easing All easing curves — power, sine, expo, circ, back, elastic, bounce — with visual reference.
Stagger Animate multiple targets in sequence with configurable delay, direction, and grid patterns.
Repeat & Yoyo Loop animations with repeat count and yoyo back-and-forth playback.
Sequencing Build complex timelines with multiple steps and the position parameter.
Timeline Control Play, pause, reverse, seek, and inspect timeline state programmatically.
Triggers
Triggers Control when and how animations play with built-in trigger types.
Page Load Auto-play animations when the page loads or DOM is ready.
Scroll Trigger Trigger or scrub animations based on scroll position with start, end, and toggleActions.
ScrollTrigger Advanced Pin elements, add spacing, configure snap points, and use scroll markers for debugging.
Hover Play animations on mouse enter with reverse or restart on leave.
Click Play animations on click with toggle support for reverse and restart.
Mouse Movement Animate based on cursor position with axis and distance modes.
Observer & Gesture Respond to pointer, touch, wheel, and scroll gestures with 21 callback events.
Presentation Mode Full-page section scrolling like a slide deck with automatic transitions.
Custom Cursor Create custom cursor effects with presets, multiple instances, and state-based styling.
Page Exit Animate elements before navigating away from the page.
Special Features
Text Splitter Split text into characters, words, or lines and animate them individually with stagger.
Text Flapper Solari split-flap display effect with cycling characters and configurable transition types.
Fit Animation Morph one element's position and size to match another using FLIP-style animations.
Motion Path Animate elements along SVG paths with auto-rotation and alignment.
Image Sequence Play frame-by-frame image sequences synced to scroll or triggers.
Lottie Sync Lottie Player animations with Motion.page timelines for scroll-driven and triggered playback.
API Reference
Motion() Complete reference for the Motion() function — retrieve, create, and configure timelines.
Static Methods Motion.set(), Motion.kill(), Motion.killAll(), Motion.reset(), Motion.refreshScrollTriggers().
Utilities Motion.utils helpers — toArray, clamp, random, snap, interpolate, mapRange.
Presets Full catalog of built-in presets — Entrances, Loops, Text Reveals, Smooth Transitions, Creative Effects.
Guides
Responsive Create animations that adapt to different screen sizes with breakpoints and matchMedia.
SPA Integration Use the SDK with React, Vue, Next.js, and Astro — cleanup, page transitions, lifecycle.
Performance Optimize animation performance — will-change, hardware acceleration, batch operations.
Debugging Debug with markers, console logging, timeline inspection, and common pitfalls.
Advanced Targeting Target specific pages with post types, custom RegEx URL patterns, and selector strategies.
Breakpoints Configure responsive breakpoints and per-breakpoint animation behavior.