3D Sphere Animation in Framer

3D Sphere Animation in Framer

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

    Linktree 3D Flip Animation in Framer

    Linktree 3D Flip Animation in Framer

    Animation

    Linktree 3D Flip Animation in Framer

    Linktree 3D Flip Animation in Framer

    Animation

    Linktree 3D Flip Animation in Framer

    Linktree 3D Flip Animation in Framer

    Animation

    Animated 3D Illustration in Framer

    Animated 3D Illustration in Framer

    Animation

    Animated 3D Illustration in Framer

    Animated 3D Illustration in Framer

    Animation

    Animated 3D Illustration in Framer

    Animated 3D Illustration in Framer

    Animation