An animation that follows the scroll

Scroll this page: the rocket counts down, lifts off, climbs through the clouds into space and settles into orbit over the Earth, as fast or as slow as you scroll, and backwards when you scroll back. The sample comp is Launch (folder Interactive examples).

Scroll · dotlottie-web0%Download .lottie

How it works

A dotLottie state machine has no scroll event. The page does not need one: it measures how far the reader has scrolled through a section and turns that into a frame. The file has no state machine at all: every frame is just a picture the page may ask for.

That changes how the comp is made: since the reader can stop anywhere, every frame must read as a still. Launch tells its story in poses, one stretch of the timeline each:

Frames	What it shows
0–29	Countdown: a T–3, T–2, T–1 label; the beacon on the tower blinks red.
30–59	Ignition: the engine lights, smoke billows out, the rocket shakes; the beacon goes green.
60–119	Lift-off: the rocket climbs to the middle of the frame while the pad and the hills fall away.
120–199	Ascent: the sky turns from day through deep blue to space, clouds and speed lines rush past, the rocket pitches over.
200–239	Orbit: the engine cuts, the Earth's curve rises into view and the rocket lies along a dashed orbit.

Three choices make the stills read as one flight:

• The camera follows the rocket. After lift-off the rocket holds the middle of the frame and the world moves instead, at three depths: far hills and stars slowest, the pad faster, clouds fastest (parallax). A still frame then shows speed without motion blur.
• A caption for each stretch. The label in the corner names the part the reader is in, so a stop anywhere still explains itself.
• Curves by meaning. Ease-in on the climb (it speeds up as you scroll), ease-out on what settles (the Earth, the pitch-over); the sky and the parallax are linear, so they keep pace with your hand.

The sky is one gradient with animated colour stops (day with a warm horizon → stratosphere → space), not three layers cross-fading, so every frame in between is a real sky, never a grey mix.

In After Effects

1. One comp, one timeline: the whole story from the first frame to the last, without loops.
2. Build it as a .lottie (or .json; scroll needs no state machine).
3. Markers are optional; they help the page start a part at a given point of the scroll (setSegment).

In AXO's preview: turn on Scroll and use the mouse wheel over the animation.

On a web page

// the version these pages use
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm";

const section = document.querySelector("#launch-section"); // tall, e.g. 260vh, with the canvas position: sticky
const rocket = new DotLottie({ canvas: document.querySelector("#launch"), src: "launch.lottie", autoplay: false });

function follow() {
  const r = section.getBoundingClientRect();
  const travel = r.height - window.innerHeight;
  const t = Math.min(1, Math.max(0, -r.top / travel)); // 0 at the top of the section, 1 at its end
  rocket.setFrame(t * (rocket.totalFrames - 1));
}
rocket.addEventListener("load", follow);
window.addEventListener("scroll", () => requestAnimationFrame(follow), { passive: true });

setFrame draws at once, so the picture keeps up with the scroll without the player playing.

Variations

• A product that assembles itself as the reader scrolls past its features.
• A progress illustration for a long article: the scene fills as the article is read.
• Only part of the page: map the scroll of one section, not the page, as above.