How to Perfect Slide-In and Slide-Out Page Transitions in Next.js with Framer Motion

Page Animation

Introduction

Have you ever come across a website or web application with stunning page transitions that left you in awe? Those smooth slide-in and slide-out animations not only look visually appealing but also provide a seamless and user-friendly experience. If you’re wondering how to implement these elegant transitions into your Next.js application, you’re in the right place.

In this step-by-step tutorial, we will explore how to use Framer Motion, a powerful animation library, to create perfect slide-in and slide-out page transitions in your Next.js project. Whether you’re a seasoned developer looking to enhance your UI/UX skills or a beginner excited to dive into the world of animations, this guide will walk you through the entire process

Tutorial Overview

In this tutorial, we will cover the following key topics:

Setting up a Next.js Project: We’ll start by creating a basic Next.js application if you don’t have one already. Setting up a project is essential to implement page transitions.
Installing Framer Motion: You’ll learn how to install and configure the Framer Motion library in your Next.js application. Framer Motion provides a straightforward way to add animations to your components.
Creating a Layout Component: We’ll introduce the concept of a layout component, which will serve as the foundation for our page transitions. You’ll see how to structure this component for optimal reusability.
Implementing Slide-In and Slide-Out Animations: The heart of this tutorial! We’ll delve into the specifics of creating slide-in and slide-out animations using Framer Motion. You’ll discover how to apply animations to individual pages seamlessly.
Testing and Troubleshooting: We’ll cover best practices for testing your animations and provide tips for troubleshooting common issues.
Optimizing Performance: It’s crucial to ensure that your animations don’t negatively impact your application’s performance. We’ll share strategies for optimizing your transitions.

By the end of this tutorial, you’ll have the knowledge and practical experience to implement eye-catching slide-in and slide-out page transitions in your Next.js projects. So, let’s get started and perfect those transitions!

Setting up a Next.js project

If you haven’t already set up a Next.js project, this is the perfect starting point. Next.js is a versatile framework for building modern web applications, and it plays seamlessly with Framer Motion. Follow these simple steps:

Step 1: Make sure you have Node.js installed on your computer. If not, download and install it from the official Node.js website.
Step 2: Open your terminal and navigate to the directory where you want to create your Next.js project.
Step 3: Run the following command to create a new Next.js project:

npx create-next-app page-transition-next-app

Note: Replace “page-transition-next-app” with your preferred project name.

Step 4: Once the project is created, navigate to your project directory:

cd page-transition-next-app

Step 5: You can now start your development server:

npm run dev

This will launch your Next.js application at [http://localhost:3000](http://localhost:3000./)

With your Next.js project set up, we can move on to the exciting part — adding animations to it!

Installing Framer Motion

Framer Motion is a lightweight and intuitive animation library for React. It seamlessly integrates with Next.js, making it an excellent choice for adding animations to your Next.js applications. To get started, open your terminal in your project directory and run the following command:

npm install framer-motion -S

This will install Framer Motion as a dependency in your project. Once the installation is complete, we’re ready to move on.

Creating a Layout Component

Before we dive into animations, let’s set up a layout component. This component will serve as the foundation for our page transitions. By encapsulating our pages within a layout component, we can ensure a consistent structure for applying animations.

In your project’s layouts directory (create it if it doesn't exist), create a new file called PageTransitionLayout.tsx or .jsx. In this file, you'll define the layout component. Here's a basic structure:

layouts/PageTransitionLayout.tsx

import { motion, AnimatePresence } from "framer-motion";  
import { ReactNode, FC } from "react";  
  
// ROUTER  
import { useRouter } from "next/router";  
  
// TYPES  
interface ILayoutProps {  
  children: ReactNode;  
}  
  
const PageTransitionLayout: FC<ILayoutProps> = ({ children }) => {  
  const router = useRouter();  
  
  return (  
    <AnimatePresence mode={'wait'}>  
      <motion.div  
        key={router.route}  
        initial="initialState"  
        animate="animateState"  
        exit="exitState"  
        transition={{  
          type: "tween",  
          duration: 0.5  
        }}  
        variants={{  
          initialState: {  
            opacity: 0  
          },  
          animateState: {  
            opacity: 1  
          },  
          exitState: {  
            opacity: 0  
          }  
        }}  
        className="min-h-screen w-full" // Feel free to add your classes here  
      >  
        {children}  
      </motion.div>  
    </AnimatePresence>  
  );  
}

In this example, we’ve used Framer Motion’s AnimatePresence & motion.div component to wrap our content. We've set up simple fade-in and fade-out animations using the initial, animate, and exit props.

Now that we have our layout component in place, we’re ready to implement slide-in and slide-out animations on our pages. In the next section, we’ll explore how to achieve these captivating transitions.

Implementing Slide-In and Slide-Out Animations

Now, let’s dive into the heart of this tutorial — creating slide-in and slide-out animations. With our layout component ready, we can seamlessly apply animations to individual pages. Here’s how to do it:

Step 1: Start by creating a new page or selecting an existing one where you want to implement the slide-in and slide-out animation. In your Next.js project, pages are typically located in the pages directory if you’re using [PageRouter](https://nextjs.org/docs/pages).
Step 2: Import your PageTransitionLayout component at the top of your page file:

import { PageTransitionLayout } from "@/layouts";

Make sure to adjust the import path according to your project structure.

Step 3: Wrap your page content with the PageTransitionLayout component:

pages/index.tsx

const Home = () => {  
  return (  
    <PageTransitionLayout>  
      <div className="h-full w-full">  
        <h1>HomePage</h1>  
      </div>  
    </PageTransitionLayout>  
  );  
}

Step 4: Customize your animations. While our layout component provides a basic fade-in and fade-out transition, you can easily customize this to achieve slide-in and slide-out effects.

For a slide-in animation, you can update the variants properties of the motion.div in your PageTransitionLayout component:

variants={{  
  initialState: {  
    x: "100vw"  
  },  
  animateState: {  
    x: 0  
  },  
  exitState: {  
    x: "-100vw"  
  }  
}}

By customizing these properties, you can achieve the slide-in and slide-out animations that give your application a polished and engaging user experience.

Testing and Troubleshooting

Testing your animations is a crucial step in the development process. Here are some tips for testing and troubleshooting your slide-in and slide-out animations:

Page Transitions: Navigate between pages in your Next.js application to ensure that the animations trigger as expected. Pay attention to both the slide-in and slide-out effects.
Browser Developer Tools: Use your browser’s developer tools to inspect elements and check for any CSS or animation-related issues. The DevTools console can also provide helpful error messages.
Framer Motion Documentation: Refer to the Framer Motion documentation for additional guidance and troubleshooting tips. The documentation is a valuable resource for understanding the library’s capabilities and resolving common issues.

By thoroughly testing and addressing any potential issues, you can ensure that your animations enhance the user experience without glitches or unexpected behavior.

Optimizing Performance

While animations can greatly enhance user experience, it’s essential to optimize them to prevent negative impacts on your application’s performance. Here are some performance optimization strategies:

Code Splitting: Use Next.js’s built-in code splitting to load only the necessary JavaScript for each page. This ensures that animation-related code is only loaded when needed, improving initial page load times.
Lazy Loading: Lazy load images and other assets to reduce the initial page load size. This can help maintain fast load times even with animations.
Minimize Repaints: Animations can trigger browser repaints, impacting performance. Minimize layout changes during animations to reduce repaints.
Testing on Multiple Devices: Test your animations on different devices and browsers to ensure a consistent and smooth experience across various platforms.

By following these optimization strategies, you can strike a balance between captivating animations and optimal performance.

Congratulations! You’ve successfully learned how to implement slide-in and slide-out page transitions in Next.js with Framer Motion. By following these steps and customizing your animations, you can create captivating user experiences that leave a lasting impression.

Feel free to experiment, explore, and apply these animations to your projects. The possibilities are endless, and your creativity is the limit.

Happy animating!