01 · OrbitPin a stage
One timeline, many moving parts.
The section is a tall track and the stage inside it is sticky. How far you have scrolled through the track is p, from 0 to 1, and it is the only clock this film has.
ImuTechz skill · scroll-motion-graphics · live demo
A canvas film whose only clock is your scroll position. Five reels, each a pure function of progress, so it seeks both ways like a video. Captions are measured every frame and the drawing never runs under them. Then the same timeline becomes a control: a story drum you can scroll, drag, click or step with the arrow keys.
01 · OrbitPin a stage
The section is a tall track and the stage inside it is sticky. How far you have scrolled through the track is p, from 0 to 1, and it is the only clock this film has.
02 · PathScrub, don't play
Scroll back and the route un-draws. The same scroll position always paints the same frame, so it seeks both ways like a video.
03 · StackStagger
Each bar owns a window inside the reel, and an ease-out makes it land rather than stop. The trend line waits until the bars have settled.
04 · WaveNo clock
The phase comes from p, not from time. When you stop scrolling the film stops drawing, so an idle page costs nothing.
05 · CloseResolve
Captions are measured every frame. Reels lay out in the space they leave, and the canvas is clipped around them, so the drawing never runs under the words.
Scroll back: it rewinds
Interlude
The drum below is rolled by the same scroll engine. Every face is a link to its reel in the film above. The rail and the arrow buttons scroll the page to a chapter, so the scroll position and the drum can never disagree. Drag it with a mouse, or focus it and use the arrow keys.
Roll it · 01 / 05
Orbit
The section is several screens tall and the stage inside it is position: sticky. Progress through the track is the timeline.
Watch the reelPath
Nothing runs on a clock. The same scroll position always draws the same frame, forwards or backwards.
Watch the reelStack
A smoothstep inside each step makes the drum dwell on a face, then roll to the next one.
Watch the reelWave
Faces are links. The rail and the arrows jump by scrolling the page, so the scroll and the drum never disagree.
Watch the reelClose
The page always scrolls normally. The loop idles when nothing moves, and reduced motion gets each face without the roll.
Watch the reelThe contract