The logic/math for the card stack itself was done by Nate Smith a while ago.
Find all the details on X: https://x.com/nasm423/status/1795133452016054401
Top-level
The logic/math for the card stack itself was done by Nate Smith a while ago. Find all the details on X: https://x.com/nasm423/status/1795133452016054401 2 comments
Or, if you prefer: a blog post. https://www.bram.us/2024/10/13/scroll-driven-animated-card-stack-with-scroll-snap-events/ |
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