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

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

thegypsyboyo
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.

3 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

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> 
        </>
    )
}

5 replies

DuduzinCp Mar 1, 2024

It worked brother IT WORKEDDDDDDDDD an angel that fell from heaven thank you so much

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

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

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: 5 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{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: 5 comments · 9 replies

Replies: 5 comments 9 replies