Smooth Animations in React with Framer Motion

Why Framer Motion?

Framer Motion offers declarative animations with great defaults, layout transitions, and gesture support in React.

Installation

npm install framer-motion

Simple Fade In

import { motion } from 'framer-motion';
  
  const FadeIn = () => (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
      Hello World
    </motion.div>
  );

Animate on Hover

<motion.button whileHover={{ scale: 1.1 }}>Hover me</motion.button>

Framer Motion also supports scroll-based animations and layout animations with ease.