3D Image Carousel in Framer

Copy component

Copy component

3D Image Carousel in Framer

Copy component

Component

3D Image Carousel in Framer

This is a 3D image carousel in Framer, recreated from Ibelick. Feel free to copy the component to your project and start playing around with it.

image of Nandi Muzsik
image of Julien Thibeaut

Created by

3D Image Carousel in Framer
3D Image Carousel in Framer
3D Image Carousel in Framer
Framer Trick: Convert 2D Elements into Interactive 3D Objects

Related Lesson

Framer Trick: Convert 2D Elements into Interactive 3D Objects

Framer Trick: Convert 2D Elements into Interactive 3D Objects

Related Lesson

Framer Trick: Convert 2D Elements into Interactive 3D Objects

Framer Trick: Convert 2D Elements into Interactive 3D Objects

Related Lesson

Framer Trick: Convert 2D Elements into Interactive 3D Objects

About the resource

To create this 3D carousel, I first had to make multiple arms, each with an image layer, and rotate them in 3D along the Y axis to form a circle of images. It might sound complex, but if you know how to use 3D transforms in Framer, it's pretty simple.

Once the images are arranged in a circle, I connect this frame to the 3D look component. In this remix, I turned the 3D image circle into a component so I can create a mobile variant as well.

When connecting a component into the 3D look, we need to add an additional code override to the component's primary variant to ensure the 3D look works. You can find this code override below. (This code override isn't needed when we're connecting a simple frame to the component.)

On the 3D look component, we enable dragging and set the X rotation limit to a max value of 0, which basically means we completely disable X rotation. This results in an element that can only be rotated around the Y axis.

Preserve 3D code override

Feel free to copy this override and create it in your own project to apply it to the component. This will essentially give the preserve-3D style to the element. We need this override because Framer doesn't natively allow adding transform properties to primary variants in components.

About the resource

To create this 3D carousel, I first had to make multiple arms, each with an image layer, and rotate them in 3D along the Y axis to form a circle of images. It might sound complex, but if you know how to use 3D transforms in Framer, it's pretty simple.

Once the images are arranged in a circle, I connect this frame to the 3D look component. In this remix, I turned the 3D image circle into a component so I can create a mobile variant as well.

When connecting a component into the 3D look, we need to add an additional code override to the component's primary variant to ensure the 3D look works. You can find this code override below. (This code override isn't needed when we're connecting a simple frame to the component.)

On the 3D look component, we enable dragging and set the X rotation limit to a max value of 0, which basically means we completely disable X rotation. This results in an element that can only be rotated around the Y axis.

Preserve 3D code override

Feel free to copy this override and create it in your own project to apply it to the component. This will essentially give the preserve-3D style to the element. We need this override because Framer doesn't natively allow adding transform properties to primary variants in components.

About the resource

To create this 3D carousel, I first had to make multiple arms, each with an image layer, and rotate them in 3D along the Y axis to form a circle of images. It might sound complex, but if you know how to use 3D transforms in Framer, it's pretty simple.

Once the images are arranged in a circle, I connect this frame to the 3D look component. In this remix, I turned the 3D image circle into a component so I can create a mobile variant as well.

When connecting a component into the 3D look, we need to add an additional code override to the component's primary variant to ensure the 3D look works. You can find this code override below. (This code override isn't needed when we're connecting a simple frame to the component.)

On the 3D look component, we enable dragging and set the X rotation limit to a max value of 0, which basically means we completely disable X rotation. This results in an element that can only be rotated around the Y axis.

Preserve 3D code override

Feel free to copy this override and create it in your own project to apply it to the component. This will essentially give the preserve-3D style to the element. We need this override because Framer doesn't natively allow adding transform properties to primary variants in components.

import { useState, useEffect, ComponentType } from "react"

export function withPreserve3d(Component): ComponentType {
    return (props) => {
        return (
            <Component {...props} style={{ transformStyle: "preserve-3d" }} />
        )
    }
}
import { useState, useEffect, ComponentType } from "react"

export function withPreserve3d(Component): ComponentType {
    return (props) => {
        return (
            <Component {...props} style={{ transformStyle: "preserve-3d" }} />
        )
    }
}
import { useState, useEffect, ComponentType } from "react"

export function withPreserve3d(Component): ComponentType {
    return (props) => {
        return (
            <Component {...props} style={{ transformStyle: "preserve-3d" }} />
        )
    }
}

Framer Navigator

Learn the fundamentals of Framer for free.

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

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    Scroll Stopper Component in Framer

    Scroll Stopper Component in Framer

    Component

    Scroll Stopper Component in Framer

    Scroll Stopper Component in Framer

    Component

    Scroll Stopper Component in Framer

    Scroll Stopper Component in Framer

    Component

    Add to Calendar Button in Framer

    Add to Calendar Button in Framer

    Component

    Add to Calendar Button in Framer

    Add to Calendar Button in Framer

    Component

    Add to Calendar Button in Framer

    Add to Calendar Button in Framer

    Component