Smooth Animations With React and Framer Motion

Frame Motion is an open source React library to power production-ready animations.

Animations with Framer Motion

What is Framer Motion?

Framer Motion is the successor to the Pose animation library. Like Pose, it provides a declarative API to power animations and gestures in your React app. Motion attempts to make the API even simpler for the simplest cases, yet more flexible to handle the most advanced.

Framer Motion — https://www.framer.com/motion/

Getting Started

Note: Framer Motion requires version React 16.8 or greater .

Installation

Install framer-motion from npm.

npm install framer-motion

Once installed, you can import Motion into your components via framer-motion package.

We can replace regular divs with the motion.div elements. Using the motion elements gives us access to many properties we can use to animate.

Let’s take this super simple React and Framer Motion component. When the component mounts, it will rotate 360 degrees in 2 seconds.

rotating elements

The animate property can accept an object of values. When one of them changes, the motion component will automatically animate to the new state.

Let’s take the pop example, where our element will “pop” in once the component mounts.

“pop”

Notice how we specify what happens with the element inside the animate property. This is where we give instructions on how to animate. The transition property is where we tell the duration of the animation.

We can even specify multiple values for each transition , animate properties and styles by passing the values as an array. This gives us the option to combine the “pop” and rotate animation into one animation.

“rotate-pop”

Gesture animations

Motion provides whileHover and whileTap helper props, that will temporarily animate a component to a visual state while a gesture is active.

Handling gestures such as hovering and tapping on a button

Notice how simple it is to animate elements. Now that we have learned the basics of Framer Motion, let’s jump into a more complicated example.

Toggling

Most toggles have two states, either they’re on or off, true or false . Let’s create a toggle component that turns off or on, depending on its current state.

The key point to take away here is the variant prop on our motion element. Variants let us define multiple states for our animations.

Variants are pre-defined visual states that a component can be in. By giving a component and its children variants with matching names, whole React trees can be animated by changing a single prop.

By using variants, a parent can easily orchestrate the animations of its children with special transition props like staggerChildren .

Variants can also be dynamic functions that return different props based on data passed to each component’s custom prop.

Note; Notice how we’re using hooks. If hooks are new to you, check out this article I wrote earlier .

Where to go next

Check out the full list of properties, custom hooks and cool animations you can do with Framer Motion. It’s an animation library well worth learning and will boost your app visuals by a huge margin.

Source Code

As always, here’s the source code and code sandbox in case you want to play with the examples.

Thanks for reading! ❤