Every page here runs the real Motion engine, so you can try each capability before reading about it. Then it shows the Builder panel that made it.
Turn any timeline scroll-driven: drag start and end markers on your real page, lock progress to the scrollbar, pin sections, and pick what a second pass does with toggle actions. The vocabulary matches GSAP's ScrollTrigger, but the published code has zero dependencies.
Markers, scrub, pin, and toggle actions, explained.Drop in a video and the Builder transcodes it into frames you scrub with the scrollbar, the frame-by-frame effect behind premium product pages. The same dropdown can play the sequence on load, click, or hover instead.
60 frames, driven by your scrollbar.Scrub a timeline with the pointer's position in Axis or Distance mode for parallax and tilt, with one slider for smoothing. The Mouse Follower trigger adds a custom cursor with presets, hover and pressed states, and squeeze physics.
The hero follows your pointer.An exit timeline plays on Page Exit before the browser navigates, and an entrance plays on load; the browser still performs the navigation itself. You scope which links participate, while cmd-click, the back button, and downloads stay untouched.
Click through the two-page simulator.Draw any stroked SVG shape on load or scroll: paths, circles, lines, anything with a measurable length. Set the range from either end or a middle segment, in percent, pixels, or a mix of both.
The hero draws itself, stroke by stroke.Split a heading into characters, words, or lines and animate each piece through an invisible mask edge. Only bare text nodes are touched, and killing the timeline restores your markup exactly.
Replay chars, words, and lines live.Hover runs a real timeline with five leave behaviors: reverse, pause, stop, restart, or none. One switch gives every card in a grid its own trigger, and the whole page shares a single pointer listener.
Hover the cards, then leave slowly.Wire a click to any element with a 1st and an optional 2nd click selector, then choose Restart or Reverse for what the second click does. A prevent-default switch covers links and submit buttons.
Open and close the demo panel.Page Load is the default trigger on every new timeline: give elements a from-state, pick Before Load or After Load, and the entrance still plays even when your script loads late.
Replay the entrance sequence.One property spaces out any set of elements from the origin you pick: start, center, edges, random, or end. Each sets a fixed gap between elements; Amount divides a fixed total across the set.
Pick an origin and watch the grid follow.Repeat an animation a set number of times or forever with -1, add Yoyo for a back-and-forth cycle instead of a reset, and set a pause between passes. Works on one element or a whole timeline.
Three loops running as you read.