Card stack using scroll-driven animation w/ snapping. Just a few lines of JS, zero dependencies. Code + demo via CodePen.IO

@paul_uiux @CodePen Absolutely amazing! Feels so good 🔥 Just a heads up, it looks like with the touchpad interaction (Swiping wasn't supported), only the first cards gets put behind the stack whereas all other repetitions just scews the stack and hard cut to the next card

@CodePen Gotcha! That’s sounds like it’s not updating the active index which requires scroll snap events (Chrome 129+)

@CodePen Chrome 129’s rolling out now I think so try updating or try on Chrome Beta?

@paul_uiux @CodePen I see! Just updated but still feels a little strange sometimes - See video for reference It feels like it's every time you don't wait until the transition has finished when the whole stack scews oddly. Maybe the ease out should be shortened and finish earlier to avoid this

@CodePen Ah yeah, that’s not right 🤨 The scroll snap change fires only when the animation has completely finished. Not ideal but if you try moving through slowly (and waiting a fraction after the out transition) I think it should all look ok

@paul_uiux @CodePen It does work if I wait! I just felt it was finished but the ease out is very slow in the end. I think if the transition of the cards went behind the stack faster and with less delay, this would solve this and various swipe speeds 🚀

@paul_uiux @CodePen Just brilliant art

@paul_uiux @CodePen Hi Paul, the codepen isn't working for me. The mouse swipe isn't working and the whole thing is stationary. Head's up.

@CodePen Hey! Can you try touch pad swipe?

@paul_uiux @CodePen Hi. Yeah, it does work with the touchpad and the middle button pressed on my PC laptop. And it works on my phone. But...Can you getting working with a normal mouse?

@CodePen We can bind mouse drag *but* when the mouse is released it’ll snap immediately (no smoothing animation to the closest snap point)

@paul_uiux @CodePen This is incredible!

@paul_uiux @CodePen Glad to see this memed

@paul_uiux @CodePen The tilt on Y axes makes the difference, feels so real. Congratulations 👏

@paul_uiux @CodePen not as cool as yours but works with without scroll snap. you are an inspiration!

@paul_uiux @CodePen Impressive! I've tried doing something similar before so I know how much effort it takes, good job!

@paul_uiux @CodePen Cool !

@paul_uiux @CodePen Very nice 👏

@paul_uiux @CodePen This is brilliant. Are you planning to make it a npm package?

@CodePen Thanks! It’s using features that aren’t available in most browsers (Safari doesn’t support scroll driven animation at all, yet) so it probably wouldn’t work as a package. Maybe in a few years?

@paul_uiux @CodePen Bird love your cards 😁

@paul_uiux @argyleink @CodePen Look so cool! Works like this really insipire me to dive deep into CSS

@paul_uiux @CodePen Amazing! Reaction to swipe is slightly too fast, would expect more distance before it changes to the next one

@paul_uiux @CodePen Love it! Scroll-driven animations using the new scroll-timeline is mind-blowing 🤯 Most frontend devs do not realize how much you will be able to do using only HTML and CSS with this! Love what you accomplished here with this new API ✨️ 🙌

@paul_uiux @CodePen i can't use it in mobile, 😮‍💨 i think it needs a few lines again

@CodePen Sorry, Safari doesn’t support scroll based animations

@paul_uiux @CodePen

@paul_uiux @CodePen Wow this is cool! ❤️❤️

@paul_uiux @CodePen beautiful.

@paul_uiux @CodePen Lord this is so good!!!

@paul_uiux @CodePen with drag enabled for the desktop, it would be cool!

@CodePen Yeah, agree! Unfortunately we can bind mouse drag events to scroll but on mouse up the scroll snaps immediately at the next snap point (no animation)

@paul_uiux @CodePen @pavan_1827

@paul_uiux @CodePen wow that's awesome!