Introducing Framer Motion

Animations are powerful when done right.However, creating eye-catching animations with CSS can be tricky.That's where Framer Motion comes in.With Framer Motion, you don't have to be a CSS expert to create beautiful animations.
**

1. What is Framer Motion? ** Framer Motion is an animation library that simplifies the creation of animations.Its simplified API helps us abstract the complexity behind animations and allows us to create animations from scratch with ease.One difference is that Framer Motion only supports React, while Pose supports React-Native and Vue. If you are currently using Pose, I would recommend upgrading to Framer Motion as Pose is deprecated.

2. How Framer Motion works

Motion components are the building blocks of Framer motion. Motion components are created by prepending motion to your regular HTML and SVG element (for example, motion.h1). Motion components can accept multiple props, with the basic prop being the animated prop. This prop takes an object in which we define the properties of that component that we want to animate. The properties we define are animated when the component is deployed in the DOM.

Let's animate an h1 text using Framer Motion. First we install the Framer Motion library and import Motion.

npm install framer-motion
import { motion } from 'framer-motion';

Then we convert the h1 into a motion component.

<motion.h1 
  animate={{x: 20, y: -20}}>
  This is a motion component
</motion.h1>

This moves h1 20 pixels to the right and 20 pixels up when loading. If no units are added, calculations are performed using pixels. However, you can explicitly specify the units on which to base the calculations, animate={x: "20rem", y:"-20rem"}}>.

By default, a motion component is animated from the state defined by its styles to those in the animated prop. However, if we wanted, we could hijack and define the initial animation state of the component using the initial prop. While the animated prop is used to define the behavior of components when mounted, the initial prop defines their behavior before mounting.

If we want our h1 to come in from the left, we control that with the initial prop.

<motion.h1
    initial={{x: -1000}}
    animate={{x: 20}}>
   This is a motion component
</motion.h1>

Now, when the h1 mounts, it slides in from the left.

The transition _prop allows us to define how the animations occur. With it, we define how values animate from one state to another. Among other things, we can define the _duration, delay, and _type _of animation using this prop.

<motion.h1
    initial={{ x: -1000 }}
    animate={{ x: 0 }}
    transition={{
        type: "tween",
        duration: "2",
        delay: "1"
    }}>
    This is a motion component
</motion.h1>

Variants

As you can see, the code is getting bigger and bigger and soon, these new props will have even more relevance than those related to React logic. We can use variants to isolate code related to animations and much more.
The variant prop in Framer Motion allows us to extract our animation definitions into a variant object.
Variants not only make our code cleaner, but allow us to create even more powerful and complex animations.
When we extract our animation definitions into variant objects, we have the following:

const Variants = {
  initial: { x: -1000 },
  animate: { x: 0 },
  transition: {
    type: "tween",
    duration: 2,
    delay: 1
  }
} 

Instead of passing the animation definitions into a component’s initial and animate props directly, we extract these definitions into standalone variant objects. In the variant objects, we define variant names that describe each animation’s name as variants.

<motion.h1
      variants={Variants}
      initial='initial'
      animate='animate'
      >

In the variants prop, we pass in the name of the variant objects for each motion component and then pass in the animations to the initial and animate props.

Conclusion

This is just an introductory guide to framer-motion, there is a lot more inside the library, especially a lot of utility hooks to make even crazier animations effortlessly.
Hopefully, this Blog gives you a solid foundation to add some great animations to your library and build upon them over time to suit all your needs.