React Animation with Framer Motion

Getting Started

It's time to advance you React project, make more interesting add some animation. if you've ever tried in react to add transition you may feel bad, 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

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";

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>
)

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>
)

GIF

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>

GIF

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