Step Wipe

The bit that took the most tuning is the wipe itself. The background and the card in the middle both have to clip open at exactly the same rate as you scroll, or it reads as two separate things happening instead of one. I drive both from a single scroll-progress number and write it into a CSS variable, then the clip-path is a static template that just reads that variable - never animate the clip-path string directly, browsers collapse it to a shorthand and the tween silently freezes then snaps. Writing the number and letting a plain CSS calc() do the rest is the only way I got it to move smoothly in both directions.

The text underneath only changes once per step, not continuously with scroll - that's deliberate. If the title and number ease with the same scrub as the image it feels sluggish and directionless. So I track which step you're actually on and fire a proper little transition - the old title lifts out, the new one rises in, the digits roll to the new number. The trigger point is direction-aware on purpose: scrolling down it fires late in the wipe, scrolling back up it fires early, so the text never flickers when you hover around a boundary. It's the same idea as an odometer, just for two digits instead of a full count-up.

Past that it's yours. Swap in your own steps with a title, a number, a description and two images, add as many as you want, and set how much scroll distance each one gets. The choreography is identical on a phone - same sticky wipe, same masked swaps - it's just repositioned with CSS: the title moves top-left, the number top-right, and the description drops below the card so nothing overlaps on a narrow screen.