30+ CSS Scroll-Driven Animations (Page 2)

A modern and clean way to indicate scrollability: the “fade-to-mist” effect is implemented using mask-image and linear-gradient, while key parameters of the fade phase are precisely tuned using @property.

Check out this cutting-edge “sticky island” effect that dynamically squishes and transforms on scroll using CSS Scroll-Timeline. The core technical feature is creating the Gooey effect by combining filter: blur() and contrast() with absolute control linked to the scroll position.

A modern implementation of interactive page flipping where the sprite animation (background-position) is fully synchronized with page scrolling using the new CSS scroll-timeline feature, eliminating JavaScript for timing control.

A sophisticated scroll-linked text filling effect powered by modern CSS Scroll-Driven Animations and custom @property logic. This snippet showcases fluid typography, responsive layouts, and the View Transition API for seamless theme switching, providing a high-performance blueprint for advanced frontend interfaces.

An advanced gallery with a carousel based on the native <dialog> element and Scroll-Driven Animations, where the View Transitions API synchronizes the modal opening with the carousel scroll to the selected image, delivering a smooth and functional UX.