If you’re building a modern web app with React, adding smooth UI animations can greatly enhance the user experience. Framer Motion is a powerful animation library built for React developers, offering a simple API with advanced features like physics-based transitions, scroll animations, and more.

In this tutorial, you’ll learn how to get started with Framer Motion, how to implement common animations, and how to use it to level up your React UI.

What You’ll Learn

• What is Framer Motion?
• How to set it up in React
• Key animation features
• Practical examples
• Best resources to go further

What Is Framer Motion?

Framer Motion is a popular React animation library created by the team behind Framer. It enables developers to create complex animations with clean and declarative syntax.

You can animate React components on load, hover, tap, scroll, or even when they leave the DOM (exit animations).

Installation

npm install framer-motion

Getting Started with Framer Motion

Here’s a basic example to animate a React component on mount:

import { motion } from "framer-motion";

function MyBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello World!
    </motion.div>
  );
}

This simple snippet fades in the element when it appears on screen.

Top Features of Framer Motion

1. Hover and Tap Animations

<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
  Click Me
</motion.button>

2. Variants for Multiple States

const boxVariants = {
  hidden: { opacity: 0, x: -100 },
  visible: { opacity: 1, x: 0 },
};

<motion.div
  variants={boxVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.5 }}
/>

3. Scroll-Based Animation

You can animate elements when they enter the viewport using useInView:

import { useInView } from "framer-motion";

const ref = useRef(null);
const isInView = useInView(ref, { once: true });

4. Exit Animations

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
/>

Practical Examples

Animated Card Hover Effect

<motion.div
  whileHover={{
    scale: 1.05,
    boxShadow: "0px 4px 15px rgba(0, 0, 0, 0.2)",
  }}
  transition={{ type: "spring", stiffness: 300 }}
  className="card"
>
  <h2>My Card</h2>
</motion.div>

Page Transitions with AnimatePresence

import { AnimatePresence } from "framer-motion";

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 50 }}
    >
      Modal Content
    </motion.div>
  )}
</AnimatePresence>

Conclusion

Whether you’re building a landing page, a dashboard, or a mobile web app, Framer Motion makes it easy to deliver smooth, intuitive, and professional animations in React. With minimal code and powerful features, it’s a go-to library for any React developer looking to improve UI/UX.