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!
Top comments (0)