Tag

#scroll-driven-animations

Tagged “scroll-driven-animations”

4 articles

Overlap detection lands in CSS with anchors and a shared timeline

Ahmad Shadeed shows how to notice when a decoration collides with a section using only CSS: anchor positioning measures the gap, a scroll-driven timeline carries the reaction, and timeline-scope shares it between siblings.

Sep 25, 2026 · Iris Calderón Browser releases

Safari Technology Preview 253 lets container queries branch on sibling-index() and frees style-originated scroll timelines

WebKit's 23 September preview brings sibling-index() and sibling-count() into @container conditions, expands style-originated scroll timelines to match globally, exposes CSSContainerRule.conditions, corrects the ViewTimeline constructor to require a subject, and fixes a VoiceOver announcement bug around aria-keyshortcuts.

Sep 24, 2026 · Yuki Tanaka CSS & layout

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