DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

HasOne
HasOne

Posted on • Updated on

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

Top comments (0)

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.