You have adjacent columns of cards and you want them drifting in opposite directions as the visitor scrolls — one rising while the other falls. The reflex is to reach for a scroll handler, request a frame, translate each column by hand. CSS-Tricks just walked through the version where you write none of that. One scroll-driven animation primitive does the lift.
The timeline lives on the item, not the page
The mechanism is animation-timeline: view(). Set it on each card and the card's own progress through the scrollport becomes the animation's clock. Scroll past it, the animation completes. Scroll back, it reverses. No scroll listener and no global state. The browser ties the playhead to the geometry it already computes during scrolling.
This is the move worth slowing down on. With view() the timeline is per-element. Two columns side by side each generate their own clocks. From there, opposite directions are just opposite keyframes.
What animation-range: entry 0% cover 100% actually does
