The animation engineyour site deserves
Visual builder meets lightweight SDK. Design scroll animations, page transitions, and interactive sequences — then ship production code with zero dependencies.
Trusted by 10,000+ design engineers — works with every platform you already use
Every animation primitive, one platform
Design visually.
Ship real code.
Select any element on your live site. Pick a trigger — scroll, hover, page load, click. Dial in timing and easing. Motion.page writes the SDK code for you — the same code a senior developer would write by hand. Copy it, eject it, own it.
See how it worksPoint. Click. Animate.
Build scroll animations, page transitions, and interactive sequences — visually. Ship them as clean, lightweight code.
Animations without the engineering
Pick elements from your live page, set triggers and easing, preview in real-time. If you can use Figma, you can use this.
Your code. No dependency.
Export production-ready SDK calls. No GSAP, no runtime library, no render-blocking scripts. Just the animation, nothing else.
Pin. Scrub. Parallax.
Scroll-driven timelines, pinned sections, parallax layers — the stuff that usually takes days of JavaScript. Built in minutes.
Animations without the engineering
Pick elements from your live page, set triggers and easing, preview in real-time. If you can use Figma, you can use this.
Design beyond the page
Place elements in 3D space, compose scenes visually, and bring them to life with the same timeline-driven precision — all inside the canvas editor.
Ship without the weight
Export clean, dependency-free code that runs anywhere. No GSAP runtime, no render-blocking scripts — just your animations, optimized and ready to deploy.
Pick your
workflow
Desktop app for full visual control. WordPress plugin for one-click install. Standalone SDK for total flexibility. Same engine behind all three.
npm i @motion.page/sdk See every from and to
on a visual timeline
Drag, resize, and reorder animation entries on a timeline. Set from and to values, adjust duration, offset overlap, add staggers — every change previews live on your actual site. When it looks right, it is right.
Learn moreOne function. One config object.
That's the entire API.
from, to, duration, ease — pass a plain object and you're done. No method chains, no class instances, no setup. The simplest animation API you've ever used.
Learn more500 elements. 60% fewer
layout recalcs than GSAP.
Cascade, wave, or randomize timing across any group — from center, edges, or a custom grid axis. At scale, the Motion.page SDK triggers dramatically fewer browser layouts and finishes in half the time. Benchmarked, not claimed.
Learn moreScroll, hover, click — chain them.
8 trigger types, fully composable.
Chain .onScroll(), .onHover(), .onClick(), .onGesture() and more. Mix scroll-driven parallax with hover interactions in a single animation. No extra plugins. No glue code.
Learn moreSplit, flip, scramble, mask —
every text effect, one property.
Split into chars, words, or lines. Add a cinematic mask reveal. Flip through an airport departure board. Scramble through katakana. Combine with stagger for orchestrated entrances — all from a single config object.
Learn moreAnimate Everything
Plays nice with
everything
WordPress, React, Astro, Webflow, Shopify, vanilla HTML — Motion.page drops into your existing stack. No rewrites, no adapter layers.
Loved by design engineers
who ship with motion.
"Genial and perfect tool. Motion Page is the most incredible tool to create complex and amazing animations with less time. I'm very impressed with the fast learning corve. MP was my favorite investment."
Andre Beltrame
"Brilliant and innovative. The next big thing in online animation. Very well crafted and very thought through."
Rene Brokop
"Once you dig and understand how the animations work, you start to see opportunities to make your website so much more interactive and modern looking than ever before."
Jonathan JerniganPick your creative weapon.
Animations, shaders, or both. No per-seat pricing — get exactly what you need and start shipping.