Nextjs Page Transition With Framer-Motion

Cover image for Nextjs Page Transition With Framer-Motion

Creating seamless and visually engaging transitions between pages has become an integral aspect of enhancing user experience. Next.js, a popular React framework, offers a powerful combination with Framer Motion, a declarative motion library for React, to bring life to page transitions, let's get started.

Setup The Project

Create a nextjs project by running this command

Loading plain text code...

This will fire the nextjs project with the latest release (in my case is version 14.1.0), feel free to set up your next project as you want, I'm going to use typescript with app router, and tailwinds for styling, clean up the root page app/page.tsx from the nextjs starter page, mine is like this

app/page.tsx

Loading plain text code...

Also, I'm going to add two more pages with the same content to the animation to look cleaner, app/about/page.tsx and app/contact/page.tsx, and add a header component for simple navigation between the pages header.tsx and use it in the layout

header.tsx

Loading plain text code...

Add Framer Motion

To install framer-motion simply run the command below

Loading plain text code...

Now after installing the framer-motion we gonna create a Transition.tsx component to define our base page transition using framer-motion, hers is the code for that component

Loading plain text code...

As you can see this component is a client component so we marked it as a client component using use client on top of the component declaration, basically we're using motion from framer-motion and using initial, animate, and transition props we can define the page animation.

Using Nextjs Template To Render Animation Pages

You may ask why we can't just use Layout.tsx to wrap our pages with the Transition.tsx component, Just like this

Loading plain text code...

The problem is you can only see the animation for the first render (initial load), then, if you navigate to other pages, Nextjs will not rerender those pages from the layout, so that the Transition will not render for that page, So, for that case Template.tsx comes as a handy solution, here is the definition of Template from Nextjs doc

Now create template.tsx under the app directory, and copy paste the code from the Transition.tsx component, and rename the component name to Template(), like below

Loading plain text code...

And here you go! we have added the page transition for the project, you can customize the transition the way you want, and have a better experience, if you have any questions feel free to ask.

Github Source Code