Tag

#scroll-driven-animations

Tagged “scroll-driven-animations”

2 articles

Opposing scroll columns with one view() timeline and three keyframe sets

CSS-Tricks walks through making adjacent columns drift in opposite directions as the page scrolls, with no JavaScript. The trick is a per-item animation-timeline: view() and animation-range: entry 0% cover 100%, repeated across three keyframe sets.

Jun 25, 2026 · Iris Calderón CSS & layout

Scroll-triggered animations land in CSS: `timeline-trigger` is not `animation-timeline`

Chrome 146 is the first browser to ship CSS scroll-triggered animations. The new `timeline-trigger` property fires a fixed-duration animation when a scroll threshold is crossed, and it is a close cousin of scroll-driven animations on a very different mechanism.

Jun 23, 2026 · Iris Calderón