Scroll-driven storytelling

Two native techniques, zero JavaScript: a position: sticky panel that pins while content scrolls past it, and animation-timeline: view() reveals that scrub as elements enter the viewport. Scroll down.

This panel sticks

It pins in place while the steps scroll past it, then releases at the bottom of the section. That's position: sticky.

Step one. Scroll on.

Step two. The panel is still pinned.

Step three. About to release.

I fade and rise as I enter, scrubbed by scroll.

Scroll up a little and I animate back. It's reversible.

No IntersectionObserver, no JS, just a pure CSS timeline.

The animation's progress IS my position in the viewport.