Two builds where scrolling is the interface: an illustrated world you travel through, and a product launch where every element arrives on its own beat.
Neither of these is a page with animation on top. One is an illustrated city you move through as you scroll, with phone screens composited into the scene to show what the app does; the other is a launch page where the product is picked apart on screen — a double-or-single switch and callouts pinned to the burger itself. The risk in both is the same: it looks superb on the machine it was built on and stutters on the phone it was made for.
Each pinned act is a single GSAP timeline driven by ScrollTrigger rather than a pile of independent tweens, so the whole sequence stays in sync and can be retimed from one place.
The illustration is planes at different depths, and the scroll moves a camera across them instead of animating every element separately — which is what lets the scene keep moving while the phone screens inside it hold their own beat.
On the launch page the ingredient markers are anchored to the photograph, and the double-or-single switch swaps the product without tearing down the sequence around it.
A reduced-motion path that still tells the same story, and static frames underneath if the sequence never starts.
Both shipped with the motion intact — the illustrated journey survived client review without being cut back to a static page, and the launch page held its sequence on mid-range phones.
Reels recorded from the live builds