DEV Community

loading...

React Animation with Framer Motion

HasOne
A TECH enthusiast Guy, who is mad to change himself to be able to change the World. and learning how to share happiness and how to enjoy other's success!
・2 min read

Getting Started

It's time to advance you React project, make more interesting add some animation. if you every tried in react to add transition you may feel hard, so let's introduce you a simple Library which gets the job done without any pain, so let's install the package first:

npm install framer-motion

# Yarn
yarn add framer-motion
Enter fullscreen mode Exit fullscreen mode

It's good idea to create new react project then install the framer motion in it.

First import the package:

import { motion } from "framer-motion";
Enter fullscreen mode Exit fullscreen mode

the framer-motion is all about <motion> component, and the second <motion.div> is html elment what you want to animate, cause without element nothing happen in even css, the animation is being controlled by <motion.h1> whenever you want to animate you UI you should invoke motion component

return (
   <motion.div>
      Hello, Framer-Motion
   </motion.div>
)
Enter fullscreen mode Exit fullscreen mode

What happened nothing, wait there is another thing to introduce animate props, there we define our animation logic, like opacity, color and so on... accepts all the CSS properties.
let's give it short:

return (
   <motion.div animate={{ opacity: 0, x: 300}}>
      Hello, Framer-Motion
   </motion.div>
)
Enter fullscreen mode Exit fullscreen mode

Alt Text

isn't cool?! but it too fast let's make it a little bit slow, if you remember I said we can use CSS properties in Framer-Motion it's time to use the Transition: duration:

<motion.div 
      animate={{ opacity: 0, x: 300 }} 
      transition={{ duration: 3 }}>
      Hello, Framer-Motion
</motion.div>
Enter fullscreen mode Exit fullscreen mode

Alt Text

SandBox

I hope tomorrow I'll post another post, that's it for now, thanks for your valuable time!

Resources:
https://www.framer.com/api/motion/animation/
Video: https://www.youtube.com/watch?v=2V1WK-3HQNk&list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i

Discussion (0)

Forem Open with the Forem app