Here’s my take on this demo: https://codepen.io/bramus/pen/xxvgzoL
- No Sass
- Reuses the same active and inactive keyframes on all cards, powered by View-Timeline + animation-range
- Reworked snapChange logic to use event.snapTargetInline, falling back to IntersectionObserver if no support
Or, if you prefer: a blog post.
https://www.bram.us/2024/10/13/scroll-driven-animated-card-stack-with-scroll-snap-events/