On-Scroll 3D Carousel

An animation concept where we rotate a carousel in 3D while scrolling.

By Manoela Ilic in Playground on
Demo Code

Recently, I came across some great inspiration for 3D animations. There are so many possibilities, but it can be tricky to find the right balance and not overdo it. Anything 3D on a website looks especially impressive when scrolled, as the motion reveals the magic of 3D to our eyes, even though the screen is flat (still) 🙂

This one gave me a lot of inspiration for an on-scroll effect:

And then this awesome reel by Thomas Monavon, too:

So here’s a small scroll experiment with rotating 3D panels, along with a page transition animation using GSAP:

You’ve surely heard the news that GSAP is now completely free, which means we can now use those great plugins and share the code with you! In this specific example, I used the rewritten SplitText and SmoothScroller.

This is just a proof of concept (especially the page transition).

I really hope you enjoy this and find it inspirational!

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

3d carousel gsap page-transition

Creating an Animated Displaced Sphere with a Custom Three.js Material

Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

Image Tiles Menu Animation

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.