Understanding the Differences Between Scroll-Driven Animations, Scroll-Triggered Animations, Container Query Scroll States, and View Transitions
By
@geoffreygraham
Summary
A technical comparison of four related but distinct CSS concepts: scroll-driven animations (animation progress tied directly to scroll position), scroll-triggered animations (animation fires at a scroll point but runs independently), container query scroll states (CSS-based scroll detection within containers), and view transitions (page-level transitions between states). The author clarifies the differences for developers who may confuse these terms.
Source
CSS-TricksUnderstanding the Differences Between Scroll-Driven Animations, Scroll-Triggered Animations, Container Query Scroll States, and View Transitionscss-tricks.comKey quotes
· 3 pulledI've said one and meant another, and I've used one when I needed another.
A scroll-driven animation is an animation that responds to, yeah, scrolling. Specifically, there's a direct link between scrolling progress and the animation's progress.
Scroll forwards, the animation moves forward. Scroll backwards, the animation moves backward.
You might also wanna read
Building CSS-native parallax effects with scroll-driven animation timelines
This article explains how to create parallax effects using CSS Scroll-driven animation timelines, a modern CSS-native approach that eliminat
dan-webnotes.com·1mo ago
Critique of Scroll Fade Animations in Web Design
The article criticizes the overuse of scroll fade animations in web design, arguing that they often create poor user experiences by being ex
dbushell.com·3mo ago
CSS Technique for True Shrinkwrapping Using Anchor Positioning and Scroll-Driven Animations
The article presents an innovative CSS technique for achieving true shrinkwrapping of elements with auto-wrapped content, which was previous
CSS sibling-index() and sibling-count(): A New Approach to Staggered Animations Without JavaScript
This article introduces two new CSS functions — sibling-index() and sibling-count() — that allow developers to create staggered cascade anim
Smashing Magazine·1mo ago
Implementing Spring and Bounce Animations with CSS's New Linear() Timing Function
The article explores the new CSS `linear()` timing function that enables physics-based animations like springs and bounces directly in nativ
joshwcomeau.com·8mo ago
Tutorial: Creating a Moving-Highlight Navigation Bar with JavaScript and CSS
The article provides a tutorial by Blake Lundquist on creating a 'moving-highlight' navigation bar using JavaScript and CSS. It covers two m
Smashing Magazine·1y ago
Comments
Sign in to join the conversation.
No comments yet. Be the first.