3D Circular Animation in Framer

Copy component

3D Circular Animation in Framer

Copy component

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 Circular Animation in Framer

This is a 3D circular card animation created in Framer without writing any code. Constantin originally conceptualized this animation. Feel free to remix the project and see how something like this can be built in Framer.

image of Nandi Muzsik
profile image of Constantin Calcatinge

Created by

3D Circular Animation in Framer
3D Circular Animation in Framer
3D Circular Animation in Framer
Framer Tutorial: Epic 3D Website Animation Without Coding

Related Lesson

Framer Tutorial: Epic 3D Website Animation Without Coding

Framer Tutorial: Epic 3D Website Animation Without Coding

Related Lesson

Framer Tutorial: Epic 3D Website Animation Without Coding

Framer Tutorial: Epic 3D Website Animation Without Coding

Related Lesson

Framer Tutorial: Epic 3D Website Animation Without Coding

About the resource

This is my most advanced 3D animation to date. All of this is possible thanks to 3D transforms in Framer, which allow you to project any layer in 3D space.

To create this animation, I first developed the right structure and placed all 12 cards within a common container that I later turned into a component.

Within the component, a main wrapping frame gets a loop effect that makes all the cards rotate continuously.

About the resource

This is my most advanced 3D animation to date. All of this is possible thanks to 3D transforms in Framer, which allow you to project any layer in 3D space.

To create this animation, I first developed the right structure and placed all 12 cards within a common container that I later turned into a component.

Within the component, a main wrapping frame gets a loop effect that makes all the cards rotate continuously.

About the resource

This is my most advanced 3D animation to date. All of this is possible thanks to 3D transforms in Framer, which allow you to project any layer in 3D space.

To create this animation, I first developed the right structure and placed all 12 cards within a common container that I later turned into a component.

Within the component, a main wrapping frame gets a loop effect that makes all the cards rotate continuously.

3d circular animation Framer component variants

3D circular animation Framer component variants.

3d circular animation Framer component variants

3D circular animation Framer component variants.

3d circular animation Framer component variants

3D circular animation Framer component variants.

The rest of the animations and movements are created by making new variants where we adjust the 3D rotation of specific frames. Then, I just have to connect these variants with "appear" triggers so we get an animation that basically loops between these variants.

If you want to learn the basics of 3D transforms so you can also create animations like these, watch my free 30-minute crash course.

The rest of the animations and movements are created by making new variants where we adjust the 3D rotation of specific frames. Then, I just have to connect these variants with "appear" triggers so we get an animation that basically loops between these variants.

If you want to learn the basics of 3D transforms so you can also create animations like these, watch my free 30-minute crash course.

The rest of the animations and movements are created by making new variants where we adjust the 3D rotation of specific frames. Then, I just have to connect these variants with "appear" triggers so we get an animation that basically loops between these variants.

If you want to learn the basics of 3D transforms so you can also create animations like these, watch my free 30-minute crash course.

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

  • Highlight key products with dynamic image grid effects

    Image Grid Scroll Animation in Framer

    Animation

    Highlight key products with dynamic image grid effects

    Image Grid Scroll Animation in Framer

    Animation

    Highlight key products with dynamic image grid effects

    Image Grid Scroll Animation in Framer

    Animation

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation