Animations in React

Breath life into React with Animation

Getting started with Framer Motion

Seth Corker
Nov 5, 2019 · 2 min read
Image for post
Image for post

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.

The final result, the animation we’re aiming for

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

Video tutorial explaining how to make an animation with framer-motion

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.

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?

The library is easy to use, the documentation is good and it’s backed by Framer. These three things make framer-motion a great fir for animation in React. Although the animation we want to reproduce could be done in CSS or plain JavaScript, I want to introduce you to framer-motion so you can get used to using it in an increasingly more complex capacity to cover more useful scenarios.

Resources:

Originally published at Benevolent Bytes on November 5, 2019.

Benevolent Bytes

Thoughts, stories and ideas about development.

Seth Corker

Written by

Sharing ideas, facts, and opinions about programming. 📚 Learn more React and JavaScript. 🗺 Learn web development tips and tricks 🛸 Discover something new

Benevolent Bytes

Thoughts, stories and ideas about development. Web development and beyond.

Seth Corker

Written by

Sharing ideas, facts, and opinions about programming. 📚 Learn more React and JavaScript. 🗺 Learn web development tips and tricks 🛸 Discover something new

Benevolent Bytes

Thoughts, stories and ideas about development. Web development and beyond.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store