We all developers are much familiar with React framework. Even if a developer is not into web development, he will be familiar with react framework. As a learning frontend developer, I've been coding for more than 6 months, but recently I came across a production-ready react library for quick and easy animations, called "Framer" (https://www.framer.com/motion/). Now you all might be thinking there are tons of animation library available, but why I'm talking about framer only? Well, I got a few good reasons to like this one. First, installation in your react applications is quite easy, to install using npm,

"npm install framer-motion"

and then import via "import { motion } from "framer-motion".

Second, to add animation, we just have to add "motion." before the desired HTML element, for example, if we have to add animation to

"<div className='cont'> Hello </div>",

we just have to replace the above-mentioned one as,

"<motion.div className='cont'> Hello </motion.div>".

And the last one, get started with animations using simple attributes as shown,

"<motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 1.1 }} drag="x" dragConstraints={{ left: -100, right: 100 }} />"

You can learn more about framer from their docs.

I hope you guys found this one helpful and will be able to show some very nice animations in your web apps.

Thank you.