Today, we can recreate this effect on the web using only HTML and CSS, thanks to advancements like CSS scroll-driven animations.
Modern CSS to the Rescue: Scroll Snap & Scroll-Driven Animations
Fast-forward to today: modern CSS has evolved to handle interactive animation patterns that previously required JavaScript. Two CSS features in particular make a pure-CSS Cover Flow possible: CSS Scroll Snap and CSS Scroll-Driven Animations.
- CSS Scroll Snap: The allows us to create scrollable carousels that snap to discrete positions. For Cover Flow, we can lay out all the “covers” in a row inside a scroll container and use scroll snapping so that one item is always centered. This gives us the basic interactive behavior (scrolling through covers one by one) without any JavaScript. The user can flick or drag the carousel, and it will neatly snap so that a cover is centered.
- CSS Scroll-Driven Animations: This is an exciting new addition to CSS that lets us tie animations to the scroll position using only CSS. In essence, we can define an animation timeline that progresses as the user scrolls, rather than over a timed duration. Specifically, CSS can track an element’s position in a scroll container (using a view timeline), and drive keyframe animations based on that. This means as a cover moves into the center of the viewport, we can animate its properties (like rotation or z-index) accordingly. All of this is done in CSS without JavaScript observers.