Resources

3D Sphere Animation in Framer

View demo

Remix project

Remix project

Resources

3D Sphere Animation 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 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

Nandi

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.

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

  • Minimalist silver camera with manual dials for ISO and shutter speed

    Fluid Card Hover in Framer

    Animation

    Minimalist silver camera with manual dials for ISO and shutter speed

    Fluid Card Hover in Framer

    Animation

    Minimalist silver camera with manual dials for ISO and shutter speed

    Fluid Card Hover in Framer

    Animation