Animate Your Next.js App with Framer Motion: A Step-by-Step Tutorial

Introduction:

Framer Motion is a powerful and easy-to-use animation library for React applications. It provides an intuitive API that simplifies creating animations and interactive experiences. In this tutorial, we'll walk you through integrating Framer Motion with your Next.js app and demonstrate some common animations.

Prerequisites:

Before diving into this tutorial, make sure you have the following:

1. A basic understanding of Next.js and React.
2. Node.js and npm installed on your system.
3. A code editor, such as Visual Studio Code.

Step 1: Set up a new Next.js project

First, let's create a new Next.js project using the following command:

npx create-next-app framer-motion-tutorial

This command will generate a new Next.js application in the framer-motion-tutorial directory. Navigate to the project directory and start the development server:

cd framer-motion-tutorial
npm run dev

Open your browser and visit http://localhost:3000. You should see the default Next.js starter page.

Step 2: Install Framer Motion

To integrate Framer Motion into your project, you need to install the library using npm:

npm install framer-motion

Step 3: Create a simple animation

Now that you have Framer Motion installed, let's create a simple animation. Open the pages/index.js file and replace its content with the following:

import Head from "next/head";
import { motion } from "framer-motion";
 
export default function Home() {
  return (
    <div>
      <Head>
        <title>Next.js + Framer Motion</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
 
      <main>
        <motion.h1
          initial={{ opacity: 0, y: -50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          Animate with Framer Motion
        </motion.h1>
      </main>
    </div>
  );
}

In this example, we import the motion object from the framer-motion package and use it to create a motion component for the h1 element. The initial, animate, and transition props define the animation parameters, such as initial state, final state, and transition duration.

Save the file and refresh your browser. You should see the "Animate with Framer Motion" heading fade in and slide down.

Step 4: Create an interactive animation

Framer Motion also supports interactive animations, such as animating elements on hover or click events. Let's create a button that animates when hovered over.

Update the pages/index.js file with the following code:

import Head from "next/head";
import { motion } from "framer-motion";
 
export default function Home() {
  return (
    <div>
      <Head>
        <title>Next.js + Framer Motion</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
 
      <main>
        {/* ... */}
        <motion.button
          whileHover={{ scale: 1.1 }}
          transition={{ duration: 0.3 }}
          className="mt-4 rounded bg-blue-500 px-6 py-2 text-white"
        >
          Hover me
        </motion.button>
      </main>
    </div>
  );
}

The whileHover prop specifies the animation to perform when the button is hovered over, while the transition prop controls the animation duration. Save the file and refresh your browser. You should see a button that scales up when hovered over.

Step 5: Animate page transitions

To animate page transitions, we need to use the AnimatePresence component from Framer Motion, which detects when children components are added or removed and animates them accordingly.

First, create a custom app.js file in the pages directory to wrap your application with the AnimatePresence component:

import Link from 'next/link';
import { motion } from 'framer-motion';
 
const About = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.5 }}
    >
      <h1>About page</h1>
      <Link href="/">
        <a>Back to home</a
        Copy code
      </Link>
    </motion.div>
  )
};

We've added the initial, animate, and exit props to control the opacity of the About page when transitioning between pages. The transition prop is set to a duration of 0.5 seconds.

Now, update the pages/index.js file to include the same animation properties:

import "../styles/globals.css";
import { AnimatePresence } from "framer-motion";
 
function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence exitBeforeEnter>
      <Component {...pageProps} key={router.route} />
    </AnimatePresence>
  );
}
 
export default MyApp;

In this example, we wrap the Component with the AnimatePresence component and add the key prop, which is set to router.route. The exitBeforeEnter prop ensures that the exiting animation completes before the entering animation starts.

Save your changes and refresh your browser. You should now see smooth page transitions between the Home and About pages.

Conclusion

In this tutorial, we've demonstrated how to integrate Framer Motion into a Next.js app, create simple animations, add interactivity, and animate page transitions. With Framer Motion, you can easily create engaging and dynamic user experiences that set your app apart from the competition.

Remember to experiment with different animation properties and techniques to find the perfect balance for your app's needs. Happy animating!