How to animate route transitions in app directory?

[tomdohnal]

Hey there!

I was wondering, how to go about animating route transitions in app directory?

The docs mention that using the template.js file (instead of layout.js) is required but I'd like to learn more!

Does anyone have any ideas?

Thanks!

[dvartic]

I tried using Template and Layout in a way that it should work based on Next documentation but I still can't get exit animations to work. Have you tried implementing something?

[kavyantic]

Absolutely write. I have trying different libraries such as framer, react-transition-group, react-springs but couldn't apply page exit transition even with exact same configuration that work for nextjs page router.

[icyJoseph]

Hi,

Sorry for posting a YT video, but they pretty much answer your question in various ways: https://www.youtube.com/watch?v=GksAsutVXOA

You'd be most interest into 6:30

All you ought to do is wrap each page with a motion.div, but you ought to do this in a separate file with use client directive and bring that into your layout file.

[dvartic]

Hello. Thank you for taking your time to respond. Unfortunately, in the video they are also unable to get exit animations working. Entry animations work fine, but exit animations require AnimatePresense to delay unmount until animation is complete. For some reason, I am unable to get this working in Next.js13 AppDir.

As my understanding of the new docs:
-Layout.tsx persists between routes and does not mount/unmount components between them. Components relying on React Context (providers) can be placed here using an external file with 'use client'. This works for all my providers.
-Template.tsx does not persists (changes between routes). Automatically receives a 'key' based on route and is placed immediately after Layout.

Based on this, I did the following in an attempt to get FramerMotion exit animations to work between routes.
-AnimatePresence placed (from an external file with 'use client') in Layout.tsx as the last component in the tree.
-A motion.div as the first component in Template.tsx

As my understanding of the docs this should work and it doesn't. I also tried multiple variations that included not using template.tsx, declaring all layout as client and many more, placing keys in other places, etc. None worked.

Next13 AppDir documentation is not great for now which doesn't help.

[Talent30]

Hello. Thank you for taking your time to respond. Unfortunately, in the video they are also unable to get exit animations working. Entry animations work fine, but exit animations require AnimatePresense to delay unmount until animation is complete. For some reason, I am unable to get this working in Next.js13 AppDir.

As my understanding of the new docs: -Layout.tsx persists between routes and does not mount/unmount components between them. Components relying on React Context (providers) can be placed here using an external file with 'use client'. This works for all my providers. -Template.tsx does not persists (changes between routes). Automatically receives a 'key' based on route and is placed immediately after Layout.

Based on this, I did the following in an attempt to get FramerMotion exit animations to work between routes. -AnimatePresence placed (from an external file with 'use client') in Layout.tsx as the last component in the tree. -A motion.div as the first component in Template.tsx

As my understanding of the docs this should work and it doesn't. I also tried multiple variations that included not using template.tsx, declaring all layout as client and many more, placing keys in other places, etc. None worked.

Next13 AppDir documentation is not great for now which doesn't help.

Yes your are right I am having the same issue here.

[isomorpheric]

As my understanding of the new docs:
-Layout.tsx persists between routes and does not mount/unmount components between them. Components relying on React Context (providers) can be placed here using an external file with 'use client'. This works for all my providers.
-Template.tsx does not persists (changes between routes). Automatically receives a 'key' based on route and is placed immediately after Layout.

I also understand it this way, and am having this same issue.

[NilsNathorst]

I'm also running in to this issue. I suspect that the AnimatePresence in RootLayout gets unmounted even though it shouldn't according to my understanding. Might be wrong though.

Here's a repo where you can check it out.

[Talent30]

This is a bug. I don’t think you can achieve exit animation in appdir.

[rosszurowski]

For reference, there's a thread in the framer/motion that discusses this topic too. There are no answers there, but some other references to the video tutorial linked elsewhere in this thread, with commenters on the video also struggling to get exit animations to work.

Goes without saying that I'm interested in this too. I've tried every combination I can think of without success. I suspect it'll need to be fixed by the Next.js team.

[kerns]

So crazy how long this issue has been kicking around now since the app dir transition.

[Catdaemon]

As I also can't get this to work at all, for my fellow issue-googleers, here's my "fun and not at all a hack" way of achieving this:

Step 1: Replace all your next/links with a or button tags, because we need to get weird :)

The rest:
Layout.tsx renders a ClientLayout, which looks like this:

'use client'

import { usePathname, useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import Template from './template'

export default function ClientRootLayout({
  children
}: {
  children: React.ReactNode
}) {
  const router = useRouter()
  const path = usePathname()
  const [loading, setLoading] = useState(false)
  // To stop the first page transitioning in, unless you want that, in which case remove this bit of logic
  const [isInitialLoading, setIsInitialLoading] = useState(true)

  useEffect(() => {
    // Bind react router navigation event to all a tags
    const onClick = (e: any) => {
      const target = e.target as HTMLElement

      var foundTarget = target

      if (
        target.tagName.toLowerCase() !== 'a' &&
        target.tagName.toLowerCase() !== 'button'
      ) {
        const closestAnchor = target.closest('a')
        if (closestAnchor) {
          foundTarget = closestAnchor
        }
      }
      const lcTagName = foundTarget.tagName.toLowerCase()

      if (lcTagName === 'a' || lcTagName === 'button') {
        const href = foundTarget.getAttribute('href')
        if (href && href.startsWith('/')) {
          e.preventDefault()
          if (href !== path) {
            setLoading(true)
          }
          router.push(href)
        }
      }
    }

    window.addEventListener('click', onClick)
    return () => window.removeEventListener('click', onClick)
  }, [router, path])

  useEffect(() => {
    window.scrollTo(0, 0)
    setLoading(false)
    setIsInitialLoading(false)
  }, [path])

  return (
    <Template loading={!isInitialLoading && loading}>{children}</Template>
  )
}

Template.tsx looks like this:

'use client'

import PageLoadingAnimation from '@/components/PageLoadingAnimation'
import { motion } from 'framer-motion'
import { useEffect, useRef, useState } from 'react'

export default function Template({
  children,
  loading,
}: {
  children: React.ReactNode
  loading: boolean
}) {
  return (
    <>
      <motion.div
        style={{ height: '100%' }}
        initial={{ x: 300, opacity: 0 }}
        animate={{
          x: loading ? 300 : 0,
          opacity: loading ? 0 : 1,
        }}
        transition={{
          type: 'spring',
          duration: 0.5,
        }}
      >
        {children}
      </motion.div>
    </>
  )
}

This is split across a couple of files to aid me copy-pasting it out of my project, but it can all live inside your client layout component. The key is to manage the loading state yourself by intercepting link clicks and pushing them to the router, and send that loading state through to whatever is going to do your transitions. This example is a simple fade and slide.

[elbasel]

[og2t]

@honorable-dandelion Would you have a more concrete example?

[elbasel]

Original comment deleted because I wasn't able to do it.

[namnhfreelancer]

https://greensock.com/forums/topic/29470-gsap-page-transitions-in-nextjs/?do=findComment&comment=190422&_rid=153488
Still can't create page transition in Gsap. I think this work need done by Next JS team

[kblauhut]

I also encountered this issue and have found a (hacky) but decently easy to implement solution:

export const LayoutTransition = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const pathname = usePathname();
  const lastPageRef = useRef<HTMLCollection | null>(null);
  const currentPageRef = useRef<HTMLDivElement>(null);
  const exitAnimationDivRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (!currentPageRef.current) return;
    if (!lastPageRef.current)
      lastPageRef.current = currentPageRef.current.children;

    exitAnimationDivRef.current?.appendChild(
      lastPageRef.current![0].cloneNode(true)
    );
    lastPageRef.current = currentPageRef.current.children;
  }, [pathname]);

  return (
    <AnimatePresence initial={false}>
      <div>
        <motion.div
          key={pathname + "exit-animation"}
          style={{
            position: "absolute",
          }}
          initial={{ x: 0 }}
          animate={{
            x: "-100%",
            opacity: 0,
          }}
          transition={{
            type: "linear",
            duration: 0.2,
          }}
        >
          <div ref={exitAnimationDivRef} />
        </motion.div>

        <motion.div
          key={pathname}
          initial={{ x: "100%" }}
          animate={{ x: 0 }}
          transition={{ type: "linear", duration: 0.2 }}
        >
          <div ref={currentPageRef}>{children}</div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
};

This will clone the last rendered page into the dom and then animate it out when the page changes. Works quite well for my use case.
Hope this helps :)

Edit: Forgot to mention, this wrapper is to be used in a layout.tsx file
Edit2: Updated the solution to use useLayoutEffect instead of useEffect

[yhemme]

Yes that's normal because of how this hack works: It will copy the page your animating out, load your next page and append the copy to animate it out while animating in the destination page.
That being said if the problem is that you actually get 2 pages that are animating out, you might wanna check if you don't use the layout transition two times in your layout or something like that.

For the onExitAnimationComplete I just tried and you're right it's not triggering for some reason. I think using onAnimationComplete on the first motion.div (The exiting one) would achieve pretty much the same thing. I hope this fit your use case and this was of help to you.

[kblauhut]

Quick heads up: I updated the answer to use useLayoutEffect because I had some issues with the screen flickering when the page transition was triggered. This happens because the exitAnimationDiv is updated after the browser starts painting when using the regular useEffect.

[andershagbard]

@kblauhut Doesn't the motion.div elements have to be direct children of AnimatePresence ?

AnimatePresence works by detecting when direct children are removed from the React tree.
https://www.framer.com/motion/animate-presence/##exit-animations

[coreydunkin]

Thank you so much @yhemme and @kblauhut, with the above examples I was able to get the below working with a tweak to move the page up and down based on the previous route:

If we use the below to grab the previous route:

"use client";
import {usePathname} from "next/navigation";
import {useEffect, useRef} from "react";

const usePreviousRoute = () => {
  const pathname = usePathname();

  const ref = useRef<string | null>(null);

  useEffect(() => {
    ref.current = pathname;

  }, [pathname]);

  return ref.current;
};

export default usePreviousRoute;

Then we can incorporate something like below in order to change the animation direction, comparing the previous route to the current route:

const routesHierarchy: Record<string, number> = {
  '/': 0,
  '/pageTwo': 1,
  '/pageThree': 2,
  '/pageFour': 3
};

const getAnimationOutVariable = (pathname: string, previousRoute: string | null) => {
  if (previousRoute !== null && routesHierarchy[pathname] < routesHierarchy[previousRoute]) {
    return {
      initial: { y: 0, x: 0 },
      animate: {
        y: "100%",
        x: 0,
        transitionEnd: {
          display: "none",
        },
      },
    };
  }
  return {
    initial: { y: 0, x: 0 },
    animate: {
      y: "-100%",
      x: 0,
      transitionEnd: {
        display: "none",
      },
    },
  };
};

const getAnimationInVariable = (pathname: string, previousRoute: string | null) => {
  if (previousRoute !== null && routesHierarchy[pathname] < routesHierarchy[previousRoute]) {
    return {
      initial: { y: "-100%", x: 0 },
      animate: {
        y: 0,
        x: 0,
      },
    };
  }
  return {
    initial: { y: "100%", x: 0 },
    animate: {
      y: 0,
      x: 0,
    },
  };
};
export const LayoutTransition = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const previousRoute = usePreviousRoute();
  const pathname = usePathname();
  const lastPageRef = useRef<HTMLCollection | null>(null);
  const currentPageRef = useRef<HTMLDivElement>(null);
  const exitAnimationDivRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!currentPageRef.current) return;
    if (!lastPageRef.current)
      lastPageRef.current = currentPageRef.current.children;

    exitAnimationDivRef.current?.appendChild(
      lastPageRef.current![0].cloneNode(true),
    );
    lastPageRef.current = currentPageRef.current.children;
  }, [pathname]);

  return (
    <AnimatePresence initial={false}>
      <div className="relative h-screen w-screen">
        <motion.div
          key={pathname + "exit-animation"}
          {...getAnimationOutVariable(pathname, previousRoute)}
          transition={{
            type: "ease-in-out",
            duration: 0.7,
          }}
          className="fixed w-full h-full"
        >
          <div ref={exitAnimationDivRef} />
        </motion.div>

        <motion.div
          key={pathname}
          {...getAnimationInVariable(pathname, previousRoute)}
          transition={{ type: "ease-in-out", duration: 0.7 }}
          className="w-screen h-screen"
        >
          <div ref={currentPageRef}>{children}</div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
};

routesHierarchy could be just the id of the link data if the id was dynamic, but the above helps in creating a seamless transition between page routes.

[ericdjavid]

I have the same issue than @yhemme the layout is rendered twice and exit animation never fire..

[evankirkiles]

Have started a discussion around the place in the code this needs to be done, as well as a proof-of-concept PR with working route template transitions using AnimatePresence:

Discussion: #56594
PR: #56591

[lucas-0liveira]

Based on what you mentioned, it seems like the docs are suggesting using the template.js file instead of layout.js for handling route transitions. This probably means that the template.js file contains the necessary code or hooks to implement animations when navigating between different routes in your app directory.

[krutilins]

My implementation is quite similar to previous ones but works like a provider that can be used directly in _app.tsx
Still looking for better solution, that will not rerender whole application tree as it's not performant

import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
import { useRouter } from "next/router";
import { useContext, useEffect, useState, useMemo } from "react";
import styled from "styled-components";

import { IsMobileContext } from "@/context/IsMobile.context";

import {
  FULL_HEIGHT_PAGES,
  FULL_HEIGHT_PAGES_REGEX,
} from "./MainLayout/ContentWrapper";

const duration = 0.5;
const AnimationDirection = { LEFT: "left", RIGHT: "right" } as const;
const Position = { IN: "in", CENTER: "center", OUT: "out" };

const variants = (
  isFullHeight: boolean,
  animationDirection: (typeof AnimationDirection)[keyof typeof AnimationDirection],
) => {
  const commonTransition = { transition: { duration } };

  if (isFullHeight) {
    return animationDirection === AnimationDirection.RIGHT
      ? {
          [Position.IN]: { x: "100%", ...commonTransition },
          [Position.CENTER]: { x: 0, ...commonTransition },
          [Position.OUT]: { x: "-100%", ...commonTransition },
        }
      : {
          [Position.IN]: { x: "-100%", ...commonTransition },
          [Position.CENTER]: { x: 0, ...commonTransition },
          [Position.OUT]: { x: "100%", ...commonTransition },
        };
  } else {
    return animationDirection === AnimationDirection.LEFT
      ? {
          [Position.IN]: { x: "100%", ...commonTransition },
          [Position.CENTER]: { x: 0, ...commonTransition },
          [Position.OUT]: { x: "-100%", ...commonTransition },
        }
      : {
          [Position.IN]: { x: "-100%", ...commonTransition },
          [Position.CENTER]: { x: 0, ...commonTransition },
          [Position.OUT]: { x: "100%", ...commonTransition },
        };
  }
};

type TransitionEffectProps = {
  children: React.ReactNode;
};

const TransitionEffect = ({ children }: TransitionEffectProps) => {
  const shouldReduceMotion = useReducedMotion();
  const { route, events, pathname } = useRouter();
  const isMobile = useContext(IsMobileContext);
  const [isFullHeight, setIsFullHeight] = useState(
    FULL_HEIGHT_PAGES.includes(pathname),
  );
  const [animationDirection, setAnimationDirection] = useState(
    FULL_HEIGHT_PAGES_REGEX.some((regex) => regex.test(route))
      ? AnimationDirection.LEFT
      : AnimationDirection.RIGHT,
  );

  useEffect(() => {
    setIsFullHeight(FULL_HEIGHT_PAGES.includes(pathname));

    const handleRouteChange = (url: string) => {
      setAnimationDirection(
        FULL_HEIGHT_PAGES_REGEX.some((regex) => regex.test(url))
          ? AnimationDirection.LEFT
          : AnimationDirection.RIGHT,
      );
    };

    events.on("routeChangeStart", handleRouteChange);
    return () => events.off("routeChangeStart", handleRouteChange);
  }, [events, pathname]);

  const animationVariants = useMemo(() => {
    if (shouldReduceMotion || !isMobile) return undefined;
    return variants(isFullHeight, animationDirection);
  }, [isFullHeight, animationDirection, shouldReduceMotion, isMobile]);

  return (
    <AnimatePresence mode="popLayout">
      <AnimatedDiv
        key={route}
        variants={animationVariants}
        initial={Position.IN}
        animate={Position.CENTER}
        exit={Position.OUT}
      >
        {children}
      </AnimatedDiv>
    </AnimatePresence>
  );
};

const AnimatedDiv = styled(motion.div)`
  flex-direction: column;
  display: flex;
  flex-grow: 1;
  height: 100%;
`;

export default TransitionEffect;

[Andrii-Antoniuk]

@leerob could we get your input on this, please? 😅 ❤️

[joebentaylor1995]

How is this still an issue a year later, never had these issues in gatsby...

[whatisjery]

If anybody is stuck trying to create page transitions with GSAP where both pages intersect, here's how I did it using the 'frozen route' solution mentioned earlier.

Working live preview : https://transition-next.vercel.app/

EDIT: I got rid of the 'frozen route' and just cloned the content to a new div like in the solution above. 😕

'use client'

import React, { useLayoutEffect, useRef, useState } from 'react'
import gsap from 'gsap'
import Navigation from './Header'

import { usePathname } from 'next/navigation'
import { useIsFirstRender } from '@/hooks/useIsFirstRender'
import { useStore } from '@/store'

interface Props {
    children: React.ReactNode
}

const Layout = ({ children }: Props) => {
    const pathname = usePathname()

    const currentRef = useRef<HTMLDivElement>(null)

    const tempRef = useRef<HTMLDivElement>(null)

    const lastRef = useRef<HTMLCollection | null>(null)

    const [currentPath, setCurrentPath] = useState<string>(pathname)

    const setIsTransitionActive = useStore((s) => s.setIsTransitionActive)

    const isFirstRender = useIsFirstRender()

    useLayoutEffect(() => {
        if (!currentRef.current) return

        if (!lastRef.current) lastRef.current = currentRef.current.children

        if (currentRef.current && tempRef.current) {
            tempRef.current.appendChild(lastRef.current![0].cloneNode(true))
            lastRef.current = currentRef.current.children
        }
    }, [pathname])

    useLayoutEffect(() => {
        const tl = gsap.timeline({
            defaults: {
                ease: 'expo.inOut',
                duration: 1.2,
            },
        })

        if (currentRef.current && tempRef.current && !isFirstRender) {
            tl.fromTo(
                tempRef.current,
                {
                    scale: 1,
                    opacity: 1,
                },
                {
                    scale: 0.94,
                    opacity: 0,

                    onStart: () => {
                        setIsTransitionActive(true)
                    },
                }
            ).fromTo(
                currentRef.current,
                {
                    yPercent: 100,
                    opacity: 0,
                },
                {
                    yPercent: 0,
                    opacity: 1,

                    onComplete: () => {
                        setCurrentPath(pathname)
                        setIsTransitionActive(false)
                    },
                },
                0
            )
        }
    }, [isFirstRender, pathname, setIsTransitionActive])

    return (
        <div className='content'>
            <Navigation />

            {pathname !== currentPath && (
                <div key={pathname + ' temp'} ref={tempRef} className='transition temp'></div>
            )}

            <div key={pathname} ref={currentRef} className='transition next'>
                {children}
            </div>
        </div>
    )
}

export default Layout

It works fine for my use case, but I'm not sure how to accomplish this in a different way. 🫤

[venkat5105]

can you provide the code of useIsFirstRender & store files?

[whatisjery]

@venkat5105 I wouldn't recommend implementing it the way I did It. It was just a "test" to achieve this particular type of page transition but I pretty much gave up after that ... I can't find a way to remember the scroll position between transitions

interface State {
    isTransitionActive: boolean
    setIsTransitionActive: (val: boolean) => void
}

export const useStore = create<State>((set) => ({
    isTransitionActive: false,
    setIsTransitionActive: (val: boolean) => set({ isTransitionActive: val }),
}))

export function useIsFirstRender(): boolean {
    const isFirst = useRef<boolean>(true)

    if (isFirst.current) {
        isFirst.current = false

        return true
    }

    return isFirst.current
}

 <Link
         style={{ color }}
         key={link.path}
          onClick={(e) => {
              if (isTransitionActive) e.preventDefault()
           }}
         className='link'
         href={link.path}
>
         {link.title},
</Link>

[ericdjavid]

Just found this useful tutorial, it works perfectly on my side
https://medium.com/@josiah.webdev/page-transitions-with-gsap-next-js-app-router-5508cee43a80

[Cybearnaut]

It is a good thought, but it does not cater for the case when the user press go back / go forward in the history

I have not come up with a good way to deal with it,
so i may still switch back to page router and wait for an update on app router

and, come on, its been more than a year,
can Nextjs team take this more serious? it is a very essential function / feature in modern websites

[rijk]

I think I found a pretty elegant way to do this using transitions. Whipped up a quick demo here: https://app-router-transitions.vercel.app

I leverage the behavior that during a (route) transition, the current page stays on screen until the new route is ready. We can combine that with an <AnimatePresence>; pending + existing content means a page transition is in progress and thus an exit animation should be run. Adding a simple {!pending && …} inside the <AnimatePresence> does the trick.

I've made a simple navigate function that adds a predefined amount of sleep() ms to make sure the animation always has time to finish. The benefit of using Promise.all() for this compared to the approach linked above, is that the route already has time to load during the animation, rather than starting after the animation has finished. To illustrate I've added a delay to the About page, which is invisible when navigating.

How it works is essentially as follows:

1. I wrap the router.push call in my own transition (next/link does this as well, but doesn't give us access to the pending value which is essential for this approach)
2. I use an onClick with preventDefault to override the default navigation code
3. When navigate is called, the pending flag is set to true
4. This removes the currently rendered page, framer-motion takes care of the rest (exit/appear animations)

[wilsonhou]

this doesn't seem to handle native browser back / forward buttons - but this is super neat!! should work for our usecase :))

[mmtftr]

this doesn't seem to handle native browser back / forward buttons - but this is super neat!! should work for our usecase :))

could you not make it work with some event handlers?

[skaneprime]

You might use popstate event to catch and handle, tho it's not exactly back&forward buttons

[ancashoria]

Are you kidding me? This needs to be highlighted in red in the app router docs as a serious limitation.

[piehouserat]

it's a real shame this limitation exists and something that should definitely be supported by the app router by now

[diarpu]

Here is a demo that I have been able to make from the code that @whatisjery shared a few months ago.

Demo: https://nextjs-app-directory-page-transitions.vercel.app/

It keeps the scroll when starting the page transition and restores it when navigating backwards, use sessionstorage for that, I don't know if it's the best way but for me it works great.

Repo: https://github.com/diarpu/nextjs-app-directory-page-transitions

[kavyantic]

how did you apply the exit animation, the PageTransition.tsx is large peace of code. Can you explain how did you acheive exit transition

[diarpu]

What is done is to clone the current content and insert it again, since at the beginning of the page change it practically disappears, from there having the contents of both pages are animated with gsap.

To maintain the scroll of the old content it does it with the function saveScrollPosition that stores the value when it is clicked in the new link and it applies it in the cloned content.

[kavyantic]

Got it. Thanks!
Although it must have been resolved by now officially.