Animation can breathe life into your web application, enhancing user experience and making your interface more engaging. Framer Motion is a popular React animation library that makes it easy to create beautiful and smooth animations with minimal code.

Whether you're building hover effects, page transitions, or complex motion sequences, Framer Motion provides an intuitive API for creating animations declaratively in React—including in Next.js apps.

Why Use Framer Motion?

Easy to use, declarative API
Fully compatible with React and Next.js
Supports simple and complex animations
Great performance out of the box
Built-in support for gestures and layout transitions

Getting Started

First, you need to install the library:

npm install framer-motion

Or with Yarn:

yarn add framer-motion

Basic Animation

To animate an element, you use the motion component instead of a regular HTML element. For example:

import { motion } from 'framer-motion';

export default function Box() {
  return (
  <
motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, I fade in!
  <
/motion.div>
  );

}

This code makes a < div> fade in over one second when it's mounted.

Animating Position and Scale

You can animate multiple properties at once—such as scale, x/y position, and rotation:


<
motion.div
  initial={{ x: -100, scale: 0.5 }}
  animate={{ x: 0, scale: 1 }}
  transition={{ type: 'spring', stiffness: 100 }}
>
  Slide &
 Scale
<
/motion.div>

Hover and Tap Animations

Framer Motion makes it easy to add interaction-based animations using whileHover and whileTap props:


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

This provides subtle feedback when users interact with UI elements.

Variants: Coordinated Animation

Variants are a powerful feature that let you define shared animation states for groups of components.

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.3
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
};

Now use them:


<
motion.ul
  variants={container}
  initial="hidden"
  animate="visible"
>

<
motion.li variants={item}>
Item 1<
/motion.li>

<
motion.li variants={item}>
Item 2<
/motion.li>

<
motion.li variants={item}>
Item 3<
/motion.li>

<
/motion.ul>

Each list item will animate in sequence thanks to staggerChildren.

AnimatePresence: Exit Animations

AnimatePresence is used to animate components when they are removed from the React tree—such as modals or pages.

import { AnimatePresence, motion } from 'framer-motion';

function Modal({ isOpen }) {
  return (
  <
AnimatePresence>
      {isOpen &
&
 (
      <
motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Modal Content
      <
/motion.div>
      )}
  <
/AnimatePresence>
  );

}

This ensures smooth exit transitions instead of instantly removing elements.

Page Transitions in Next.js

In a Next.js app, you can use Framer Motion with AnimatePresence to animate between pages. Here's a basic example:

// _app.js
import { AnimatePresence } from 'framer-motion';

export default function App({ Component, pageProps, router }) {
  return (
  <
AnimatePresence mode="wait">
    <
Component {...pageProps} key={router.route} />
  <
/AnimatePresence>
  );

}

Then add page-level animation inside each component:

import { motion } from 'framer-motion';

export default function HomePage() {
  return (
  <
motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Home Page
  <
/motion.div>
  );

}

Motion Layout: Smart Animations

Framer Motion also includes a powerful feature called layout that lets you animate between different layouts intelligently without defining the animation manually.


<
motion.div layout>

<
p>
Content that resizes smoothly<
/p>

<
/motion.div>

This is great for expanding cards, resizing elements, or toggling visibility with animation.

Performance Tips

Use layoutId for shared layout animations
Use AnimatePresence for exit transitions
Keep animations lightweight on mobile
Avoid animating expensive properties like box-shadow

Conclusion

Framer Motion is one of the best tools for adding animation to React and Next.js projects. Its API is expressive, simple, and powerful—making it perfect for both beginners and pros.

By integrating animations thoughtfully, you can significantly improve user experience and create interfaces that feel smooth and modern.

Start small with hover effects, and soon you'll be building full-blown interactive motion UIs with coordinated transitions and animated layouts.

Go ahead—add some motion to your next project and make it feel alive!

Animations Blogs

Creating Animations with Framer Motion

Creating Animations with Framer Motion