The exit animation does not work with Next.js 16.2.6 and Framer Motion 12.4.0 #3736

changhejeong · 2026-05-24T12:08:14Z

changhejeong
May 24, 2026

Greetings, I am trying to implement the page transition for each page with Framer Motion v12.40.0. My goal is when users click on the link on the navigation bar, the current page will perform the exit animation, then go to the next page.

But I encounter an issue that the exit animation does not work, only the enter animation works.

My approach is to write an animate wrapper then apply to each page.

This is the complete code for the navigation bar.

import Link from 'next/link'

export default function Navbar() {
  return (
    <nav className="bg-orange-950 text-gray-50 p-4 shadow-md">
      <div className="container mx-auto flex justify-between items-center">
        <Link href="/" className="text-xl font-bold">
          Company Logo
        </Link>
        <div className="space-x-6">
          <Link href="/" className="hover:text-lime-600 transition">
            Home
          </Link>
          <Link href="/services" className="hover:text-lime-600 transition">
            Services
          </Link>
          <Link href="/pricing" className="hover:text-lime-600 transition">
            Pricing
          </Link>
          <Link href="/about" className="hover:text-lime-600 transition">
            About
          </Link>
          <Link href="/contact" className="hover:text-lime-600 transition">
            Contact
          </Link>
        </div>
      </div>
    </nav>
  )
}

This is the complete code for layout.tsx.

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import './globals.css'

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

export const metadata: Metadata = {
  title: 'Company Website',
  description: 'Welcome to our company website',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="min-h-screen flex flex-col">
          <Navbar />
          <main className="w-full">
            {children}
          </main>
          <Footer />
        </div>
      </body>
    </html>
  )
}

This is the complete code for the animate wrapper (/component/AnimateWrapper.tsx) in the client component.

'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { usePathname } from "next/navigation";

export default function AnimateWrapper({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname}
        initial={{ opacity: 0, scale: 0.95, x:-1000 }}
        animate={{ opacity: 1, scale: 1, x:0 }}
        exit={{ opacity: 0, scale: 0.95, y:100 }}
        transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1] }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

This is the complete code for home page, I apply the animate wrapper to each code including the home page.

import AnimateWrapper from '@/components/AnimateWrapper';

export default function Home() {
  return (
    <AnimateWrapper>
      <div className="w-full justify-items-center p-10 min-h-[calc(100vh-8rem)] bg-green-950 text-blue-100">
        <h1 className="text-4xl font-bold mb-6">Welcome to our company</h1>
        <div className="text-lg">
           ...
        </div>
      </div>
    </AnimateWrapper>
  )
}

I have read the official doc, the motion.div tag in the needs a key prop to enable the exit animation, but I don't know the proper value for the key prop, or if there are something missing.

Thank you in advance for any solutions and answers.

Answered by RobinArtemstein

May 27, 2026

The root cause is the architecture of Next.js App router have completely changed compare to the conventional page router.

There are 2 ways which might be helpful.

The first way is to restart your Next.js project with the conventional page router.

Next.js still allows users to choose the page router even though the latest version.

If you insist on the app router, then there is a library called next-transition-router.

https://github.com/ismamz/next-transition-router

And here is the test website which on my GitHub repository.

https://github.com/robin-artemstein/nextjs-company-website-framer-motion

Best of luck.

View full answer

RobinArtemstein · 2026-05-27T12:46:46Z

RobinArtemstein
May 27, 2026

The root cause is the architecture of Next.js App router have completely changed compare to the conventional page router.

There are 2 ways which might be helpful.

The first way is to restart your Next.js project with the conventional page router.

Next.js still allows users to choose the page router even though the latest version.

If you insist on the app router, then there is a library called next-transition-router.

https://github.com/ismamz/next-transition-router

And here is the test website which on my GitHub repository.

https://github.com/robin-artemstein/nextjs-company-website-framer-motion

Best of luck.

1 reply

changhejeong May 27, 2026
Author

Thank you for your answer, I had tried again, it does work.😄😄😄

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

The exit animation does not work with Next.js 16.2.6 and Framer Motion 12.4.0 #3736

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

The exit animation does not work with Next.js 16.2.6 and Framer Motion 12.4.0 #3736

Uh oh!

Uh oh!

changhejeong May 24, 2026

Replies: 1 comment · 1 reply

Uh oh!

RobinArtemstein May 27, 2026

Uh oh!

changhejeong May 27, 2026 Author

changhejeong
May 24, 2026

Replies: 1 comment 1 reply

RobinArtemstein
May 27, 2026

changhejeong May 27, 2026
Author