Gregory's ServerWow, look at this AMAZING Scroll-Driven Animations demo by Paul Noble!
https://codepen.io/paulnoble/pen/gOVPedz
Go check it out (and hit the ❤️ icon).
 16 comments
To make the .card-stack see the scroll-timeline, it gets hoisted using`timeline-scope` on the body. Any child of the body - including .card-stack – can now use that `--scroll-timeline`. To make the cards show at the center, Paul relies on scroll snapping, which brings me to the second clever thing he did there: use the new `scrollsnapchange` event to change the `data-active-index` attribute on the `main` element. (The logic relies on doing some pixel calculations which could be reworked to use `event.snapTargetInline` instead, but that’s me nitpicking) And finally here’s the third clever thing Paul did: use that `data-active-index` to attach different animations to the cards. This is done for each possible index and is auto-generated using Sass. The keyframes are also generated and built in such a way that you get the directionality effect. For example, here are the keyframes for the 4th card being active. Upon inspecting the other keyframes you’ll see the keyframe here at 75% move around. (I believe this per-card keyframes approach can be simplified by either leveraging `animation-range` or by relying on a ViewTimeline per scroll-item [which I think would also bypass the need for `scrollsnapchange`], but again: that’s me nitpicking here) Thank you for building this WONDERFUL scroll-driven animations demo, Paul. It was very delightful to see. Stellar work! (Is Paul on Mastodon? Couldn’t find a matching profile here.)  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 Here’s my take on this demo: https://codepen.io/bramus/pen/xxvgzoL - No Sass Or, if you prefer: a blog post. https://www.bram.us/2024/10/13/scroll-driven-animated-card-stack-with-scroll-snap-events/ @bramus Sadly it's only working in Chrome for me. Neither Firefox nor Safari seem to work. |
The first clever thing Paul is doing there is using an invisible scroller laid on top of the stack of cards.
This scroller is used as the scroll-timeline for the .card-stack.