Create Page Transitions in Next.js with Framer Motion

How to Create Page Transitions in Next.js with Framer motion

So today we will see how can we have animation between pages in Next.js

You can simply clone the next tailwind starter template and follow the steps in the readme.

I am going to use tailwind CSS for basic styling. Feel free to use anything.

We will install framer motion into our app.

npm i framer-motion # npm
yarn add framer-motion # yarn

Creating the pages

First, create a new file in the pages folder. This will create a new route for you.

I am naming it about.js. This is the file. I am just creating an h1 tag and a button that will redirect to the home page.

Now I am going to do the same in the index.js.

We have set up both pages. It would look like this.

Creating the transitions

Now we will go to _app.js

Import motion:

import { motion } from “framer-motion”;

Wrap the app in a motion.div:

We will pass in initial, animate, and variants to our motion.div:

This is will animate on the first render but will not change anything on changing the routes. So for that, we will add a key of router.route which we get through the props.

This will give us a nice fade-in animation while changing routes

I hope you could build beautiful page transitions. If you face any issues feel free to dm me on any of my socials listed below. Peace ✌🏻

Useful links:

Github repository for this project

Framer motion docs

Next.js docs

All socials

Further Reading

Next.js 13: What Do The New Bleeding-Edge Features Actually Do?

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.