Animate in style with Framer Motion

If you're thinking:

"Wow, that looks complicated!"

or

"Wow, you've got time on your hands."

Then allow me to introduce Framer-Motion

As per https://www.framer.com,

A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

To put it simply,

you can use framer-motion to create elegant animations like the one listed above in as little no time.

To start

run the following command within your React application:

npm install framer-motion

Once you've got that set up you're good to go.

What specifically you want to animate is up to your choice. Here I will show you an example that's easy to understand.

Regardless of what you choose to animate, the options are endless.

Let's begin with a simple example.

Let's say you have a div within a component like so:

<div>
   <h2>Header!</h2>
</div>

And you want to animate that header to come from the right and to fade in.

First

Import both AnimatePresence and motion from framer-motion

import {AnimatePresence, motion} from "framer-motion"

This will allow you to add "motion." to whatever element you choose give animated capabilities.

Then

Add the code to your render

<AnimatedPresence>
   <motion.div>
      <h2>Header!</h2>
   </motion.div>
</AnimatedPresence>

Finally

Framer-motion gives a ton of options to fiddle around with. In this examples, we will only be using opacity and x-coordinates

<AnimatedPresence>
   <motion.div 
       initial={{x: 100, opacity: 0}} 
       animate={{x: 0, opacity: 1}} 
       exit={{opacity:0 }}
       >
      <h2>Header!</h2>
   </motion.div>
</AnimatedPresence>

Voila

You now have a basic understanding of how to implement framer-motion into your application with smooth animations!

For details on the transition from the beginning

Check out this how-to guide by CoderOne!