Scroll-driven animated card stack with scroll snap events

The post breaks down Paul Noble’s card stack demo and then revisits it with a different implementation. The original uses an invisible scroller on top of the cards, hoists its ScrollTimeline to the body with timeline-scope, and uses scroll snapping so a card stays centered.

It also uses the new scrollsnapchange event to update data-active-index on the main element. That state controls separate animations for the snapped card and the non-snapped cards. The remix tries to share keyframes through ViewTimeline and animation-range, and adds a fallback for browsers without Snap Events.

Reading notes

#

• An invisible scroller sits over the card stack and drives a ScrollTimeline named –scroll-timeline.
• timeline-scope on body lets .card-stack use that timeline.
• CSS scroll snapping keeps the cards centered.
• scrollsnapchange updates the markup with the snapped card through data-active-index.
• The snapped card gets an active 3D rotation animation.
• The other cards get an inactive animation that rotates each card around its base.
• The remix uses shared keyframes with ViewTimeline on the linked .scroll-item.
• animation-range limits when each animation runs.
• The rewritten scrollSnapChange logic uses event.snapTargetInline.
• IntersectionObserver is used as a fallback where Snap Events are not supported.