Pick an element
Click anything on your page. The Builder edits the live site, not a mockup.
Motion.page · Visual animation builder
ScrollTrigger, without the code.
Make sections fade, pin, and scrub as visitors scroll: by dragging markers on your real page, not writing code. Every demo on this page runs on it.
The product
Watch it actually work.
Meet Motion.page: All-in-One platform for web animation · YouTube
Inside the Builder
Markers you can see. Sliders you can drag.
Choose Scroll from the trigger dropdown and live viewport markers appear over your real page, showing exactly where the animation starts and ends while you drag them.
Choose Scroll
One dropdown turns the timeline scroll-driven. No plugin to register, no refresh() calls to write. The trigger is a setting, not a script.
Set the range and publish
Drag the Reaches sliders, lock to the scrollbar or pick a toggle action, then publish clean code to your site.
Works with every platform you already use
Toggle actions
Toggle actions: decide what happens on the way back.
Scrubbing ties motion to the scrollbar. Toggle actions fire it at thresholds: play on enter, and you choose what enter-back and leave do. The premade list in the panel below covers the common patterns.
Every behavior in that dropdown is one pick away. Set it on your own sections in the Builder in a few minutes.
Pinning
Pin the stage. Scroll the story.
Hold any section in place while the animation plays through it: horizontal stories, step-by-step reveals, product walkthroughs. You scrolled through one at the top of this page; here's the same pattern being built in the Builder.
- Pin the animated element or any other selector.
- Spacing below the pin is handled automatically.
- Set the scroll distance in pixels or percent.
Precision
Start on any element. End 1600px later.
Scroll animation lives or dies on its boundaries. Every position control in the panel maps to something you can point at on the page.
- Starts and ends anywhere
- Position both boundaries against any element or selector: top, center, or bottom, with a percentage or pixel offset.
- Relative end distance
- Set the end as a distance from the start ("1600px after it begins") instead of hunting for a second landmark.
- Scrub smoothing
- Lock the animation to the scrollbar, then add seconds of catch-up delay so motion feels weighted, not jittery.
- Per-element triggering
- One timeline, many elements: each card or heading can fire its own copy when it enters the viewport.
- Custom scroller
- Drive everything from an inner scrollable container instead of the window when the layout calls for it.
Under the hood
Zero dependencies. One listener. Tree-shaken output.
What the Builder publishes is the same engine running every demo on this page: small, dependency-free, and careful with the main thread.
- Zero dependencies
- Published animations run on Motion.page's own engine, tree-shaken at publish so your site ships only the features you use. It covers scroll, text splitting, cursors, and gestures: no plugin registration, no license files.
- GSAP-compatible vocabulary
- start and end strings, scrub seconds, pin and pinSpacing, toggle actions, snap, markers, custom scrollers. The positioning vocabulary matches ScrollTrigger. No once flag or enter/leave callbacks; progress drives everything.
- One listener, batched writes
- A single passive scroll listener feeds every trigger on the page, and all DOM writes flush together once per event.
- Self-healing measurement
- Trigger positions re-measure after images load, on resize, and when the page height changes: no manual refresh calls.
- Reduced motion, your call
- Builder timelines ship with a prefers-reduced-motion fallback you control from the trigger panel, bypass it only on purpose.
The Motion code behind the second row above (in the Builder, this is generated for you):
Motion("reveal", ".chip", {
from: { opacity: 0, y: 26, scale: 0.9 },
stagger: 0.09,
}).onScroll({
start: "top 82%",
toggleActions: "play reverse play reverse",
});What is a scroll-triggered animation?
A scroll-triggered animation is motion that starts, progresses, or reverses based on how far a visitor has scrolled, instead of playing on a timer. A trigger watches an element, and when that element crosses a chosen line in the viewport (the start boundary), the animation responds. A second line marks the end.
Scrubbing ties the animation's progress directly to the scrollbar: scroll halfway through the range and the animation is half done, scroll back and it rewinds. Pinning holds an element fixed on screen while the surrounding page keeps scrolling: the technique behind horizontal stories and step-by-step product walkthroughs.
Toggle actions are the discrete alternative to scrubbing: the animation plays when the element enters the viewport, and you decide what happens when it leaves, re-enters, or scrolls back out: play again, reverse, restart, or nothing. Motion.page puts all three behaviors in a visual panel with live markers, on your real page.
Questions about ScrollTrigger.
Is this GSAP ScrollTrigger?
No. It's Motion.page's own scroll engine with a GSAP-compatible vocabulary. Start and end positions, scrub, pin, and toggle actions work the way you expect, but the published code has zero dependencies and doesn't load GSAP.
Do I need to write code?
No. Select an element, switch the trigger to Scroll, and shape the behavior with visual controls. Live viewport markers show exactly where the animation starts and ends while you drag.
Why not just write the scroll listener myself?
You can, but then you own the plumbing: a manual refresh() call whenever the page height changes, your own passive-listener and batched-write setup so triggers don't fight over layout, and your own reduced-motion guard. Motion.page's Scroll trigger re-measures itself after images load, on resize, and when the page height changes, and every trigger on the page already shares one passive listener with batched writes.
Can I pin a section while it animates?
Yes. Turn on Pinned element, point it at any selector, and the Builder holds it in place for the scroll distance you choose; spacing is handled automatically.
Does it work in WordPress and Desktop?
Yes. The Scroll trigger is available in both the Motion.page WordPress plugin and the Desktop app, with the same controls, and it works on elements from any page builder: Elementor, Bricks, Divi, or Gutenberg included.
Does it conflict with GSAP already on my site?
No. The engine never touches window.gsap and registers no GSAP plugins, so a theme or plugin that already loads GSAP keeps working untouched alongside it.
What happens to my animations if I cancel?
Timelines published as local code live in your own site and keep running; they don't phone home. CDN-hosted delivery (where we host and serve the animation file for you) and further editing require an active license.
Will scroll animation slow my site down?
The engine uses one passive scroll listener for the whole page and batches every DOM write, so triggers stay cheap even with many animations. Published code is tree-shaken, so a scroll animation ships only the scroll engine.
Still deciding? Try free for 7 days →
Pick your creative weapon.
Animations, shaders, or both. Flat pricing, no per-seat math.
Includes ScrollTrigger
Visual animation builder
Builder
Unlimited projects
Unlimited WordPress sites
Unlimited desktop projects
CDN and local code
All Builder features
€149/ year
That's just €12.42/mo · save 50%
WebGPU shader editor
Canvas
WebGPU-based shader editor
Unlimited canvases
Publish with CDN
Export to code, image or video
All Canvas features
€149/ year
That's just €12.42/mo · save 50%
Builder + Canvas combined
Bundle
Everything in Builder
Everything in Canvas
Priority support
Best value
ScrollTrigger
Build your first scroll animation.
Instant access, in Motion.page for WordPress and Desktop.