50
Animate in style with 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.
run the following command within your React application:
npm install framer-motionOnce 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 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.
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.
Add the code to your render
<AnimatedPresence>
<motion.div>
<h2>Header!</h2>
</motion.div>
</AnimatedPresence>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>You now have a basic understanding of how to implement framer-motion into your application with smooth animations!
Check out this how-to guide by CoderOne!
50