Smooth Animations With React and Framer Motion

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

Indrek Lasn
Jul 12 · 4 min read
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 both simpler for the simplest cases and more flexible to handle advanced cases.

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

Framer Motion is particularly powerful because it solves another huge problem in design: The handoff.

Designers often spend days perfecting animations down to the last spring, only to find that the finer details get lost during development. By using the same animation library in prototyping and production, you’re now guaranteed a truer and more efficient way to ensure your animations are always one-to-one.


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.


Animating

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

Rotating Animation
Rotating Animation
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 Animation
Pop Animation
“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.

Pop and Rotate Animation
Pop and Rotate 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.

Pressing on Button animations
Pressing on Button animations
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

Toggling a button animation
Toggling a button animation

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.

toggle.js component

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.


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 it will boost your app visuals by a huge margin.

If you want to learn how animations work in depth, here’s a fantastic O’Reilly book I recommend. Find the kindle version here.


Source Code

Here’s the source code and the code sandbox if you want to try playing around with Framer Motion.

Codesandbox

Thanks for reading!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Simplicity matters. Grow together. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.