DEV Community

Cover image for Animate in style with Framer Motion
Nathan A. Hains
Nathan A. Hains

Posted on

Animate in style with Framer Motion

Alt text of image


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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Voila

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

Alt text of image

For details on the transition from the beginning

Check out this how-to guide by CoderOne!

Top comments (0)