Animations in React
Breath life into React with Animation
Getting started with Framer Motion
Framer motion is a library by the folks over at Framer, it’s focused on creating animations easily in React. For some it might seem familiar, that’s because it’s marketed as a successor to Pose by Popmotion — a library that I loved but didn’t get as much backing as a product. Backing from Framer will ensure that the library will continue to evolve and receive more attention.
What we’re creating
This tutorial will focus on creating an animated React component which reveals itself when the user scrolls up and hides again when the user scrolls down.
Animations on the web can be challenging if you don’t know where to start. There are a lot of ways to animate something and it can be particularly difficult finding the best way to animate a component in React. So we’re going to explore framer-motion because I think it’s an easy way to get started and it gives great results.
The video tutorial
Showing an animation on mount
The most simple building block we can use is the motion element. We simply access the DOM element we want to create with the equivalent from
motion and add an
animate prop. The property we want to animate is
opacity so let's set that to 1. This is the end state we want the animation to finish at.
Note about performance
If you have a look at the profiler, you’ll notice that the component re-renders every time we scroll. To improve performance we can wrap the actual DOM elements we are rendering in a new component so that even when the container renders, the child should only render when we are animating between the two states. We could also try and reduce the number of state updates that happen due to scroll.
Why use Framer Motion?
Originally published at Benevolent Bytes on November 5, 2019.