Chrome 146 Ships Scroll-Triggered Animations: How They Differ from Scroll-Driven Animations
By
@dxnnydotfun
Summary
Chrome 146 has shipped scroll-triggered animations, becoming the first browser to support this CSS feature. Unlike scroll-driven animations that tie animation progress directly to scroll position, scroll-triggered animations play for a fixed duration once a scroll threshold (e.g., an element entering the viewport) is surpassed. The article explains the differences between the two approaches, demonstrates how scroll-triggered animations work with CSS, and shows practical implementation examples including fade-in effects triggered by intersection with the viewport.
Source
CSS-TricksChrome 146 Ships Scroll-Triggered Animations: How They Differ from Scroll-Driven Animationscss-tricks.comKey quotes
· 3 pulledChrome has shipped scroll-triggered animations, and is the first browser to do so.
Scroll-triggered animations play for a fixed duration once a certain scroll threshold has been surpassed.
This is a bit different to how scroll-driven animations work, so in this article I'll compare them, and then show you how scroll-triggered animations work.
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
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
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
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
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
Comments
Sign in to join the conversation.
No comments yet. Be the first.