Log inGet Started

Getting Started

Install the SDK, create your first animation, and understand the basic pattern.

Installation

npm install @motion.page/sdk
bun add @motion.page/sdk
pnpm add @motion.page/sdk
yarn add @motion.page/sdk

Quick Start

Motion(name, target, config) creates a named timeline. .play() triggers it immediately.

The Core Pattern

Every animation follows the same shape:

ts 
Motion(name, target, config).trigger()
  • name — Registry key. The same name always returns the same Timeline instance, so you can reference it from anywhere.
  • target — CSS selector, Element, NodeList, or an array of elements.
  • config — Animation properties: from, to, duration, ease, stagger, and more.
  • trigger — How the animation starts.

Common triggers at a glance:

ts 
// Play on page load
Motion('hero', 'h1', { from: { opacity: 0 }, duration: 0.6 }).onPageLoad();

// Scrub on scroll
Motion('parallax', '.bg', { from: { y: -100 }, to: { y: 100 } }).onScroll({ scrub: true });

// Lift on hover (each card independently)
Motion('cards', '.card', { to: { y: -8 }, duration: 0.3 }).onHover({ each: true, onLeave: 'reverse' });

CDN / Script Tag

No bundler? Load the SDK from a CDN — Motion is exposed as a global:

html 
<script src="https://cloud.motion.page/sdk/latest.js"></script>
<script>
  Motion('fade', '.box', {
    from: { opacity: 0, y: 20 },
    duration: 0.6,
  }).onPageLoad();
</script>

Next Steps