3D Animations with Framer Motion

Hi developers, in today’s adventure, we will learn about 3D animations with React and Framer Motion. Since this is an introductory article to 3D animations, the example I’ll explain is pretty straightforward.

The requirements for this tutorial are:

• Basic knowledge of React
• Basic understanding of Framer 2D animations

However, if you are curious about how this works, I’ll leave a repo with comments explaining every line of the code.

1. Concepts to know before coding

I will start by explaining the most attractive component of the project: the star.

If you are already familiar with 3D animations, you’ll know that a mesh is a collection of vertices, edges, and faces. In this case, we are going to be using this one:

We will not be building a mesh; we will only modify it as we want it to look. Whether you want it to be shiny or matte or light reflecting, Framer will allow us to do all kinds of modifications.

Before we start coding, I would like to introduce you to another fundamental concept that might be helpful in your 3D animations journey:

Gimbal Lock

Gimbal lock is a three-dimensional rotation using Euler angles that can be understood as rotating a gimbal:

Gimbal lock refers to the loss of one degree of freedom — when two of the three axes of the gimbals are positioned in a parallel configuration, it makes the gimbal fall in a two-dimensional rotation, as the following example represents:

When the two outer axes of the gimbal are parallel to each other, the gimbal is left with only one movement available.

Rotating a three-dimensional object might be a pretty complex task to approach in code; fortunately, all the computation and logic for it is done by most libraries, and the Framer is not an exception.

2. Why does the gimbal lock end with quaternions

Quaternions break the gimbal lock. The gimbal lock issue arises anytime you do three consecutive rotations (such as Euler Angles) to get from an inertial coordinate frame to a body frame. It combines three successive quaternion rotations (through an operation called composition).

Quaternions can overcome gimbal lock because they can represent the transformation from the inertial coordinate frame to the body-fixed frame in a single rotation.

However, the significant disadvantage of quaternions — it is not physically intuitive to come up with the desired quaternion.

3. Coding the star

Now, let’s have some fun — I hope you find it as exciting and specific as I did.

Using a mesh with Framer 3D is pretty straightforward. You will find this file here with all the comments explaining the code.

We are going to start importing our dependencies to render our mesh:

We are going to declare our StarIcon component; however, it is essential to mention that the hover event (which is the one that triggers the rotation) will be passed as a prop of the component.

Then we are going to use our mesh file and define the lights that will reflect on the star:

And our two-dimensional variants will look like this:

Except for the hover variant, as you can see above, we’ve applied a transition in the Z-Axis.

Now, we will return our Star component. By wrapping everything with the Canvas component, it will allow us to render and position our mesh.

Then, inside the canvas, we are going to map the lights that we defined at the beginning of our file:

Once lights are in place, we will need to open a group tag to include our mesh in the scene.

And inside this group tag, we finally define our mesh!

4. Alternatives for lazy devs

Although libraries like Framer 3D are compelling for modeling 3D objects, others do not require an extensive learning curve. These are the two that I found the most interesting:

1. Spline: it allows you to create your 3D Scenes and objects and embed them automatically in your React, WordPress, Webflow, or even HTML Project.
2. Framer Handshake: Still in beta — similar to spline, but will only be available for NextJS.

I hope this article helps you to start creating your 3D animations with code. But, most importantly, I hope you had some fun while doing this project. If you liked it, consider giving me some applauses.

See you next time!