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

Prianca

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

Fluid Card Hover in Framer
Animation
Fluid Card Hover in Framer
Animation
Fluid Card Hover in Framer
Animation
3D Curved Grid Scroll Animation in Framer
Animation
3D Curved Grid Scroll Animation in Framer
Animation
3D Curved Grid Scroll Animation in Framer
Animation