How to make Page Transitions In Nexjs14 App Dir in the layout.tsx. #59349

lewmeta · 2023-12-07T07:51:47Z

lewmeta
Dec 7, 2023

How to make Page Transitions In Nexjs14 App Dir in the layout.tsx. Exit animation does not seem to work with framer motion when you animate presence. Because this can only work client slide. SO i have to initialize "use client" but layout.tsx is a server component

joebentaylor1995 · 2024-01-12T03:04:26Z

joebentaylor1995
Jan 12, 2024

Absolutely crazy how this hasnt been answered still and everybody on the web is looking for an answer.

4 replies

sohaha Jan 12, 2024

Yes, I have also been looking for a long time, can only consider switching to other frameworks.

madfcat Jan 23, 2024

@sohaha what would be a good alternative?

sohaha Jan 24, 2024

Because of our small project, I have switched to nuxtjs for the time being. @madfcat

SwapnilSoni1999 Nov 7, 2024

Damn still not marked any answer yet

markoleavy · 2024-01-24T13:03:27Z

markoleavy
Jan 24, 2024

Can't you just manage framer motion on a wrapper client component inside layout.tsx? Thant's how I manage all of my global context and states.

// layout.tsx server component
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <FramerMotionWrapper>{children}</FramerMotionWrapper>
      </body>
    </html>
  );
}
// FramerMotionWrapper.tsx client component

'use client';
export const FramerMotionWrapper: React.FC<{children}:{children: React.ReactNode}> = ({children}){
  // manage states etc.
  return {
    <AnimatePresence>{children}</AnimatePresence>
  }
}

0 replies

xkudive · 2024-02-23T17:38:32Z

xkudive
Feb 23, 2024

Use Template Component to wrap a children

import type { Metadata } from "next";
import { Inter } from "next/font/google";

import Template from "./Template";

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

export const metadata: Metadata = {
  title: "Store",
  description: "Store",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  
  return (
    <html lang="en">
        <body className={inter.className}>
          // Wrapper component
          <Template>{children}</Template>
        </body>
    </html>
  );
}

Template Component with FrozenRouter which makes exit animation working:

"use client"

import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { usePathname } from "next/navigation";
import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useContext, useRef } from "react";

// Prevents instant page opening
function FrozenRouter(props: { children: React.ReactNode }) {
    const context = useContext(LayoutRouterContext ?? {});
    const frozen = useRef(context).current;

    return (
        <LayoutRouterContext.Provider value={frozen}>
            {props.children}
        </LayoutRouterContext.Provider>
    );
}


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

    return(
        <>
            <AnimatePresence mode={'wait'} initial={false}>
                <motion.div 
                    key={pathname}
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    exit={{opacity: 0}}
                    transition={{duration: 0.8, ease: [0.27,0.94,0.48,1.0]}}
                >
                    // Completing page exit animation and load new page
                    <FrozenRouter>{children}</FrozenRouter>
                </motion.div>    
            </AnimatePresence> 
        </>
    )
}

6 replies

jashnaik Apr 18, 2024

doesn't template.tsx automatically wraps the children in the layout file like

<layout>
<template>{children}</template>
</layout>

like this automatically happens when u create template.tsx doesnt it , or am i missing something here

sovetski Apr 25, 2024

It gives this error for me:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

goodcallpaul Apr 27, 2024

yeah i'm getting the same error, something weird is going on with this one

notAnii May 1, 2024

Is this still the only way around it?

AlexDemzz Jul 22, 2024

Cause of FrozenRouter, i've a scrollTop just before switch to new page, any fix ?

j2is · 2024-03-27T18:44:41Z

j2is
Mar 27, 2024

Frozen router has it's own problems eg. browser back and forward. There's no real solution yet, it's an open bug #49279

0 replies

sovetski · 2024-04-25T11:35:12Z

sovetski
Apr 25, 2024

I found this answer which works without any error : https://stackoverflow.com/a/78299318/7186622

If answer deleted, the original content was:

There's a better approach for framer motion page transitions on Next.js 14, and for this case, the solution would be using its new template.js file, which is explained here under "File conventions" from Nextjs doc (must read).

So, after installing framer-motion we can create our page transition template file:

/app/template.tsx
"use client";

import { motion } from "framer-motion";

export default function Template({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ ease: "easeInOut", duration: 0.75 }}
    >
      {children}
    </motion.div>
  );
}
Simply place it under /app/ root directory or under other directories where your page.tsx lies and your page transitions are ready to go! You can tweak this file to change transitions for further customization.

Note that we're explicit defining 'use client' in template.tsx and that changes nothing about the way your root or page layout is going to render server or client components.

If we use /app/layout.js and place a page transition component there instead of using template.js, it would load the page transition animation for the first render (initial load) because of Next.js caching strategy for layout.js file. So if you were to navigate to other pages, Next.js would not re-render those pages from the layout, and page transition animation would not render for that page.

So, for that case template.tsx comes as a handy solution as it creates a new instance for each of their children when navigation changes.

here's a video explaining how this solution works: https://youtu.be/eUvzrCDc9FE?si=DvKSm35y4MjrYDnI

1 reply

xkudive Apr 25, 2024

bro this code will not work if you want exit page animation, only for page entering

about-daniel · 2024-07-18T13:46:18Z

about-daniel
Jul 18, 2024

Any update on this guys? Is NextJs working on something to implement about page transitions?
Any solutions?

2 replies

SwapnilSoni1999 Nov 7, 2024

Seems like no proper solution is out there

gerardmarquinarubio Nov 18, 2024

Framer-motion guys rightfully say its not their problem. Their AnimatePresence exit transitions works with any other framework, including NextJS with the pages router. The Next guys broke the AnimatePresence detection and transition blocking modes of framer-motion. NextJS guys say they provided "guidance" to the framer-motion guys on how they could acomodate framer-motion to work with NextJS app router but when asked for clarification on what that guidance was they went radio silent.

It's pretty sad that all we get after 2+ years of this bug is some vague comments and a blaming game.

The best alternative right now is to use https://github.com/shuding/next-view-transitions but I wouldn't rely too much on a early implementation of a barebones helper library of a beta API.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to make Page Transitions In Nexjs14 App Dir in the layout.tsx. #59349

{{title}}

Replies: 6 comments 13 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to make Page Transitions In Nexjs14 App Dir in the layout.tsx. #59349

Replies: 6 comments · 13 replies

Replies: 6 comments 13 replies