Scroll-driven animations
This page was coded without any JavaScript, just HTML and CSS. Note this feature came out in 2025 and does not yet work in Firefox.
While I think "scrollytelling" is overused, I like that it gives the viewer tactility and agency. It's less cinema, more flipbook.
I create the logical scenes, each corresponding to an HTML <section>, and then decide how to compose them. Almost everything is measured in vh units, so a typical scene might be 100-200vh (1-2 viewport heights). Sometimes scenes overlap, for example the wagging robot and lightning bolt burstwagging robot and lightning bolt burst.
The melting snow couplemelting snow couple is a time lapse from playing with cheap ESP32 microcontrollers. I used ImageMagick to montage them into a long vertical sprite sheet. The sprite sheet is set as a background image whose position is animated in discrete steps by frame height, like pulling a film strip across a shutter. The timing of rotating the video was choreographed with the snowman falling over by trial and error.
The lightning boltslightning bolts are essentially a rudimentary particle effect. Each bolt is animated by the same underlying animation, but with distinct index values to create pseudo randomness. I've never implemented a PRNG in CSS before! It's hacky but gets the desired effect. Calculations use polar coordinates to get the radial directionality.
CSS animations are tied to a timeline, which usually is the time since the page is loaded. Animated properties are interpolated according to the current position in the timeline. Scroll-driven animations work exactly the same way but they replace the time-based timeline with a scroll position timeline.
If you'd like to learn more about scroll-driven animations, I definitely recommend this video series by the Chrome team.