3D Sphere Animation in Framer

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

This is a 3D animated sphere in Framer. It's made by drawing rectangles on a design canvas and using 3D transforms—no code written here. Feel free to remix the project and see how it’s built.

image of Nandi Muzsik

Created by

3D Sphere Animation in Framer
3D Sphere Animation in Framer
3D Sphere Animation in Framer

About the resource

This 3D sphere is easier to make than you might think. You just have to create multiple frames with fully rounded corners and a stroke color, then rotate them around the X and Y axes.

About the resource

This 3D sphere is easier to make than you might think. You just have to create multiple frames with fully rounded corners and a stroke color, then rotate them around the X and Y axes.

About the resource

This 3D sphere is easier to make than you might think. You just have to create multiple frames with fully rounded corners and a stroke color, then rotate them around the X and Y axes.

3d sphere layers

3D sphere layers.

3d sphere layers

3D sphere layers.

3d sphere layers

3D sphere layers.

To rotate these frames, I used 3D transforms in Framer, which are a set of properties that can project any layer into 3D space while keeping it completely editable.

If you're new to 3D transforms, check out this free crash course on them.

To rotate these frames, I used 3D transforms in Framer, which are a set of properties that can project any layer into 3D space while keeping it completely editable.

If you're new to 3D transforms, check out this free crash course on them.

To rotate these frames, I used 3D transforms in Framer, which are a set of properties that can project any layer into 3D space while keeping it completely editable.

If you're new to 3D transforms, check out this free crash course on them.

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

  • 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

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation