3D Sphere Animation in Framer

3D Sphere Animation in Framer

3D Sphere Animation in Framer

3D Sphere Animation in Framer

Website animation

Website animation

Website animation

Website animation

3D Sphere Animation in Framer

3D Sphere Animation in Framer

3D Sphere Animation in Framer

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.

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.

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.

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.

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

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.

Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.