Email or username:

Password:

Forgot your password?
Bramus's posts Post Back to profile
Top-level
Bramus

(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)

8 October at 8:21 | Open on front-end.social
6 comments
Bramus

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.)

8 October at 8:22 | Open on front-end.social
meduz'

@bramus This is so well executed. :bave:

8 October at 8:31 | Open on m.nintendojo.fr
Bramus

The logic/math for the card stack itself was done by Nate Smith a while ago.

Find all the details on X: x.com/nasm423/status/179513345

8 October at 8:35 | Open on front-end.social
Bramus

Here’s my take on this demo: 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

12 October at 22:46 | Open on front-end.social
Go Up