Log inGet Started

What is Motion.page SDK

Overview of the SDK — a standalone animation engine with named timelines, triggers, and zero dependencies.

Motion.page SDK (@motion.page/sdk) is a standalone animation engine purpose-built for the web. It gives you named timelines, implicit value resolution, built-in triggers, and zero dependencies to manage.

Install

bash 
bun add @motion.page/sdk
# or
npm install @motion.page/sdk

Quick Start

typescript 
import { Motion } from "@motion.page/sdk";

Motion("fade-in", ".hero", {
  from: { opacity: 0, y: 40 },
  duration: 0.6,
  ease: "power2.out",
}).play();

Three arguments: a name for the timeline, a target selector or element, and an animation config. Call .play() and you’re done.

Why Motion.page SDK?

Named timelines

Motion('name') always returns the same Timeline instance. Call it from anywhere in your app to reference, control, or extend the same animation — no need to store references in variables.

typescript 
// Create
Motion("hero", ".hero", { from: { opacity: 0 } }).play();

// Control from anywhere
Motion("hero").pause();
Motion("hero").reverse();

Implicit value resolution

Only specify from or to — the SDK reads the missing endpoint from the element’s current computed CSS. No need to hard-code both states.

typescript 
// Animates FROM opacity 0 TO whatever the element currently has
Motion("reveal", ".card", { from: { opacity: 0, y: 30 } }).play();

Built-in triggers

Chain triggers directly on timelines instead of wiring up listeners manually:

typescript 
Motion("on-scroll", ".section", { from: { opacity: 0 } }).onScroll();
Motion("on-hover", ".button", { to: { scale: 1.05 } }).onHover({ each: true, onLeave: "reverse" });
Motion("on-click", ".panel", { to: { height: "auto" } }).onClick({ each: true });
Motion("on-load", ".hero", { from: { y: -20 } }).onPageLoad();

Available triggers: .onScroll(), .onHover(), .onClick(), .onPageLoad(), .onPageExit(), .onMouseMove(), .onGesture(), .onCursor()

Text splitting built-in

Animate by chars, words, or lines with an optional mask effect — no extra plugin or setup:

typescript 
Motion("headline", "h1", {
  from: { opacity: 0, y: "100%" },
  split: "words",
  stagger: 0.05,
}).onPageLoad();

FLIP animations built-in

Morph an element from one position/size to another using the fit property:

typescript 
Motion("morph", ".card", {
  fit: { target: ".destination" },
}).onClick(".card");

SVG drawing built-in

Animate SVG strokes with drawSVG — no plugin needed:

typescript 
Motion("draw", "path", {
  from: { drawSVG: "0%" },
  to: { drawSVG: "100%" },
  duration: 1.2,
}).onScroll();

Zero Dependencies

The SDK is a self-contained animation engine with no external dependencies. Install the SDK and you’re ready — your bundler doesn’t need to resolve anything else.

Bundle Formats

FileFormatUsage
dist/index.jsESMimport { Motion } from '@motion.page/sdk'
dist/index.cjsCommonJSrequire('@motion.page/sdk')
dist/motion-sdk.browser.jsIIFE<script> tag — exposes window.Motion
dist/index.d.tsTypeScript declarationsAutomatic via moduleResolution: bundler

Works out of the box with Vite, webpack, Rollup, esbuild, and direct <script> tags.

Browser Support

All modern browsers: Chrome, Firefox, Safari, Edge. The IIFE build targets any browser with ES2015+ support.

SDK & The Builder

The Motion.page Builder is a visual animation design tool (available as a desktop app and WordPress plugin). Design animations with a drag-and-drop timeline editor, configure triggers, adjust easing curves — then export the result as SDK code ready to paste into your project.

The SDK is the runtime. The Builder is the design tool. They’re independent — you can use the SDK without the Builder, and vice versa.

Next Steps