SMRTR summary
Scroll-driven animations track scroll progress continuously; scroll-triggered animations fire once at a threshold. CSS container query scroll states blend both approaches, while view transitions handle page/state changes independently, with no scroll connection.
SMRTR provides this summary for quick context. The original article belongs to CSS-Tricks.
Read the original articleThis archive is built from SMRTR newsletter summaries. Subscribe for hand-picked stories without the extra noise.
More SMRTR summaries that connect to this topic.
CSS view timelines animate elements based on their visibility in scrollports, creating scroll-driven effects like carousel items that scale and blur.
CSS's new scroll-driven animations feature enables smooth scrolling effects without JavaScript, using the CSS Animations API to control animations based on scroll progress. The...
Learn to create JavaScript-free parallax animations using CSS scroll() and view() functions with SVG blocks and multi-image backgrounds.
Chrome 144's new scroll-state(scrolled) CSS queries let you style elements based on scroll direction, enabling JavaScript-free directional animations and navigation patterns.
CSS now natively handles virtualization, container-based layouts, and scroll animations that React developers traditionally solve with heavyweight JavaScript libraries.
CSS masking and animation techniques are advancing, enabling more sophisticated scrolling effects. A new method uses animation-timeline and custom properties to fade out edges of...