loading...

React Animation with Framer Motion

hasone profile image HasOne ・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

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

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>

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

Posted on by:

hasone profile

HasOne

@hasone

A tech enthusiast

Discussion

markdown guide