Fires once
The browser detects this card at 10% visible, then plays a fixed 400ms animation. Scroll-speed has no effect.
Scroll slowly — watch the difference. Left column fires once at 10% visible. Right column tracks your scroll position.
The browser detects this card at 10% visible, then plays a fixed 400ms animation. Scroll-speed has no effect.
Identical to the first — author has no control over how the reveal maps to scroll position.
Once it's played, scrolling back doesn't reset it. The state persists.
Opacity and translate are driven by view progress. Stop mid-scroll — the card stops mid-reveal.
Scroll back up and the reveal reverses. It's genuinely tied to the element's position in the viewport.
Pure CSS via animation-timeline: view(). No requestAnimationFrame, no IntersectionObserver.