Smooth Animations With React and Framer Motion
Frame Motion is an open source React library to power production-ready animations
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 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.
Note: Framer Motion requires version React 16.8 or greater.
framer-motion from npm.
npm install framer-motion
Once installed, you can import Motion into your components via
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 two seconds.
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.
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
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.
whileTap helper props that will temporarily animate a component to a visual state while a gesture is active.
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.
Most toggles have two states: either they’re on or off,
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
Variants can also be dynamic functions that return different props based on data passed to each component’s
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.
Here’s the source code and the code sandbox if you want to try playing around with Framer Motion.
Created with CodeSandbox. Contribute to indreklasn/react-framer-motion-examples development by creating an account on…
Thanks for reading!