3D Cube Carousel in Framer

This is a 3D cube carousel recreated in Framer from bpco's website. It uses scroll and 3D transforms to rotate the cube as you scroll, showcasing content on each face. Feel free to remix this project to see how scroll transform can bring a 3D element to life without needing any code.

Created by

Nandi

and

3D cube design featuring vintage and modern sports cars

About the resource

To create a 3D cube carousel with scroll animation in Framer, the core concept revolves around using 3D transforms to position and rotate layers in 3D space. To know more on how to create rectangular 3D objects in Framer, watch this tutorial.

The cube rotation is driven by scroll transforms, where scrolling controls the rotation angle. Sticky positioning ensures the cube remains in view during scrolling. You can learn all about scroll animation in this video.

About the resource

Scroll transform UI with trigger and transition settings — The scroll transform effect in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

More resources

View all

Card Stack Scroll Animation in Framer
Animation
Card Stack Scroll Animation in Framer
Animation
Card Stack Scroll Animation in Framer
Animation
Image Zoom Scrolling in Framer
Animation
Image Zoom Scrolling in Framer
Animation
Image Zoom Scrolling in Framer
Animation