What is Framer Motion?
Framer Motion is an animation library for React and is the successor of Pose, which has now been deprecated but was one of the most popular animation libraries for React. Compared to Pose, Framer Motion has a more flexible and simpler API. It can be used for both simple and complex animations and transitions. What would normally be complex CSS animations, Framer Motion can achieve the same effect with fewer lines of code. With less code to write, it will be easier to read and maintain.
How does Framer Motion Work?
Motion components are the foundation of Framer Motion. In order to create a motion component, you need to prefix an element (HTML or SVG) with “motion.” This gives it access to many props, most notably the animate prop, which drives the animation you will see. Once mounted to the DOM, the animation will start.
Getting Started
Assuming, you already have a react app made, we can install the framer-motion library in the terminal.
Once that is imported, let’s import motion from the framer-motion module as well as prefix an element with motion.
Now we can use the animate prop to do a simple animation. In this example, we will move the whole div 50px to the right and 50px down.
Let’s add some additional props to the motion component. Notice how we can change the initial state of motion component. Visit this link if you’d like a complete list of what framer-motion has to offer, such as types of animations, gestures, etc.
Our component is getting a little clunky, but we can refactor this using variants.
This achieves the same effect, but we can create a variant object. Notice how inside of this object, we have two keys (start and end). These can be named anything, but the key names should be passed into the initial and animate prop, respectively. We also use a new prop called variants which is set equal to the object that we created.
Inheritance
Child elements will inherit variant changes from the parent. Let’s switch up our code by including a second child, as well as changing the animation.
Notice how we pass in the initial and animate props to the parent div. The children of the div will inherit this. Thus, when we create our variants variable for each of the children, the keys we will use will be based off of this. This will create the following animation:
SVG
SVG (Scalable Vector Graphic) use “vector” data instead of pixels. This allows it to scale up to any resolution. They are generally used for logos, diagrams, charts/graphs, or something you want to animate. I won’t go into too much detail of the different parts, but it has a path that dictates where the lines will be drawn. Let’s take a look a Framer Motion’s logo.
Now, that we have that, we can work on animating it. Because we are only animating the path, we will prefix the path with motion. However, you can also animate the svg element as well if you’d like.
Putting it Together
Now, that we have a logo, let’s import this to our App component and see how this looks.
