How to Add Page Transitions in NextJs 14 using Framer Motion

Explore the seamless integration of Framer Motion in Next.js 14 to enhance user experience with captivating page transitions. Elevate your web application's visual appeal and engagement effortlessly!

Enhance Your Pages: Adding Framer Motion Transitions in Next.js 14

Overview:

Discover how to elevate your website's visual appeal by seamlessly incorporating Framer Motion page transitions in Next.js 14. Follow these simple steps to enhance the user experience with captivating animations. Find the complete code in the GitHub repository .

Installation Steps:

Initialize Next.js Project: Begin by creating a new Next.js project or use an existing one.

terminal

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
# or
bunx create-next-app

Install Framer Motion: Navigate to your project directory and install Framer Motion.

terminal

pnpm install framer-motion

Create template file in app router:

A template file is similar to a layout in that it wraps each child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation.

app/template.tsx

"use client";

import { motion } from "framer-motion";

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ ease: "easeInOut", duration: 0.75 }}
    >
      {children}
    </motion.div>
  );
}

Template components should accept and use a children prop. template is rendered between a layout and its children.

Create Navbar Component:

let's start by crafting a navigatio bar.

In your components folder, create a new file Navbar.tsxHere's a basic structure to get you started:

components/navbar.tsx

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="py-8">
      <ul className="container flex gap-10">
        <li>
          <Link href={"/"}>Home</Link>
        </li>
         <li>
          <Link href={"/about"}>About</Link>
        </li>
         <li>
          <Link href={"/contact"}>Contact</Link>
        </li>
      </ul>
    </nav>
  )
}

Import Navbar To Layout:

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next Transition",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} container mx-auto`}>
        <Navbar />
        {children}import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next Transition",
  description: "Generated by create next app",
};

export default function RootLayout(
{  children }: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} container mx-auto`}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}
      </body>
    </html>
  );
}

Create Pages To View The Trasition:

app/about/page.tsx

export default function About() {
  return (
    <section className="py-12">
      <div className="container">
        <h2 className="mb-12 text-3xl font-bold">About Us</h2>
        <div className="flex gap-12">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit. Amet, sit
            accusamus tenetur iure laboriosam ab dolor autem mollitia
            perspiciatis enim est sint facere temporibus tempora 
            dolorem.
            Laborum veniam officiis eligendi.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit. Amet, sit
            accusamus tenetur iure laboriosam ab dolor autem mollitia
            perspiciatis enim est sint facere temporibus tempora 
            dolorem.
            Laborum veniam officiis eligendi.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, sit
            accusamus tenetur iure laboriosam ab dolor autem mollitia
            perspiciatis enim est sint facere temporibus tempora dolorem.
            Laborum veniam officiis eligendi.
          </p>
        </div>
      </div>
    </section>
  );
}

app/contact/page.tsx

export default function Contact() {
  return (
    <section className="py-12">
      <div className="container">
        <h2 className="mb-12 text-3xl font-bold">Contact Us</h2>
        <div className="flex gap-12">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, sit
            accusamus tenetur iure laboriosam ab dolor autem mollitia
            perspiciatis enim est sint facere temporibus tempora dolorem.
            Laborum veniam officiis eligendi.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, sit
            accusamus tenetur iure laboriosam ab dolor autem mollitia
            perspiciatis enim est sint facere temporibus tempora dolorem.
            Laborum veniam officiis eligendi.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, sit
            accusamus tenetur iure laboriosam ab dolor autem mollitia
            perspiciatis enim est sint facere temporibus tempora dolorem.
            Laborum veniam officiis eligendi.
          </p>
        </div>
      </div>
    </section>
  );
}

By following these steps, you can effortlessly integrate Framer Motion page transitions into your Next.js 14 project directly within your rich text editor, ensuring a visually appealing and engaging user experience.

How to Add Page Transitions in NextJs 14 using Framer Motion

Support