Create Page Transitions in Next.js with Framer Motion

Create Page Transitions in Next.js with Framer Motion

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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

More content at **plainenglish.io**

Interested in reading more such articles from Avneesh Agarwal?

Support the author by donating an amount of your choice.

Recent sponsors
 
Share this