Resources

3D Cube Carousel in Framer

View demo

Remix project

Remix project

Resources

3D Cube Carousel in Framer

View demo

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

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.

image of Nandi Muzsik
image of Prianca S.

Created by

Nandi

and

3D cube design featuring vintage and modern sports cars
3D cube design featuring vintage and modern sports cars
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

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

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.

Scroll transform UI with trigger and transition settings

The scroll transform effect in Framer.

Scroll transform UI with trigger and transition settings

The scroll transform effect in Framer.

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

Nandi portrait's background
Nandi's portrait

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

Nandi portrait's background
Nandi's portrait

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

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

    COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

    COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation