On-Scroll 3D Stack Motion Effect

An experimental 3D card stack animation on scroll.

Oh boy, when I saw this amazing NFT cards Dribbble shot by Renat Muratshin, I was literally drooling all over my keyboard! What a masterpiece of motion! Have a look for yourself:

Clearly, something this stunning can only serve as inspiration! So, I’ve got tons of ideas swirling in my head, and there’s one in particular I’d like to share with you today. The goal was to execute the entire motion upon scrolling. Definitely a challenge, especially when you consider all the factors like rotations, Z-axis translations, and ensuring responsiveness. So, I went rogue with some hard coding – go easy on me, no pitchforks, please!!

Anyway, I want to share this experiment with you, I really hope you enjoy it!

Sorry, I couldn’t imitate the beautiful card design but hope you like my geeky flat version!

Hope you enjoy this! As usual, feel free to take this demo, play with it and make something real out of it! 👾

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.