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.

[CogitoBurrito]

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.

[CogitoBurrito]

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.

[NickWoodward]

August 2024 says hi

[musamaraslinewcode]

Mid-august 2024 and after many frustrating hours finally found this thread, freeing me of this miserable fixation to find the solution for the exit animation...

[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>

[carloitaben]

Yeah this is not a Framer Motion problem. Exit animations cannot work in the App Router with Next's render stack. This article is a nice read about the problem. This issue (specifically this comment) are also worth checking out.

Wasn't a problem in Pages Router and in other routers like Tanstack Router or React Router.

The current workaround is hacking on the internal LayoutRouterContext in a way that it's not concurrent safe and just feels bad 😅

Would be awesome to have a transitions API like the one in Nuxt or other animation-oriented routers, like Taxi or Swup. View Transitions are awesome but for design-oriented work you want to serve page transitions to the majority of your traffic. You don't really see View Transitions on sites like the ones showcased here

[joebentaylor1995]

NextJS just need to sort this out tbh, I’m close to moving to a different framework entirely due to this issue. It’s a joke now

[joebentaylor1995]

Completely agree Rijk!On 7 Aug 2024, at 13:48, Rijk van Wel ***@***.***> wrote: Bit disappointing after all this time to see you simply passing the hot potato to Framer Motion. Obviously they are not planning a fix because it’s not a bug; the thread you linked was just people using it wrong. The real issue as has been documented thoroughly by others is that rather than simply rendering the <Page> in the Layout’s {children} spot, Next wraps it in all kinds of providers and components behind the scenes, which breaks AnimatePresence’s ability to detect changes in its children. This wrapping is undocumented, unexpected and another one of the ways the framework actively gets in your way, which is a big issue in the latest versions of Next (been using since v9 btw). It seems to me this should be easily fixable, by either (in my order of preference): Wrapping the internal page provider tree in an element with a unique key (this would allow AnimatePresence to detect change) Giving us a usePathname hook that runs in sync with the router so we can wrap the children ourselves (currently that doesn’t work well) Provide access to the router’s internal transition pending value (e.g. a useIsNavigating hook) Giving us access to router events like we had in the pages router Lastly, I stand by my previous comment, that page transitions are table stakes functionality especially for SPA frameworks, and should not require complex user land implementations. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[gerardmarquinarubio]

This issue was opened 2 years ago. It's pretty astonishing that the biggest react framework hasn't figured out how to properly do exit route transitions. Especially when this was a non-issue in the pages router.

[rijk]

Yup, seems they are so focused on server components now they forgot they are a framework for building client apps. This issue clearly has 0.0 priority for them, other than what they say. Because there is no evidence of them attempting or even discussing a potential fix, other than "we asked Framer Motion to fix it". The lack of built-in loading indicators was also brought up in this recent interview, and Lee said the solution should be userland components. I don't even know how we're supposed to build those without router events, but whatever.

I've personally started to look elsewhere cough Tanstack Start cough, Next has lost its shine for me. The new features only brought downside (more complexity leading to more bugs, loss of client side features like these, time consuming cache revalidation issues in my code) and not the upside I was expecting (e.g. improved Lighthouse scores, reduced bundle size, reduced complexity in my code).

[jerrickhakim]

If bundle size is not an issue you can do something like this in layout, you can import your pages from the file path if you don't want to define them shown in this example, if you need server calls in layout, create an App.js file with similar logic (still import pages here) there. Your pretty much opting in to CSR here at this point.

PS: Don't ask about apple-mobile-web-app-capable. On my iPhone 14 on the latest update requires if for Splash Screens to work. Deprecated? My test say... NO.

import "@/globals.css";

import React from "react";
import BottomNav from "@/components/merchants/BottomNav";
import { useRouter, usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
const Home = () => (
  <div className="min-h-screen bg-blue-600 text-center p-4 flex items-center justify-center">
    Home Page
  </div>
);
const Favorites = () => (
  <div className="min-h-screen bg-green-600 text-center p-4 flex items-center justify-center">
    Favorites Page
  </div>
);
const Account = () => (
  <div className="min-h-screen bg-emerald-600 text-center p-4 flex items-center justify-center">
    Account Page
  </div>
);
const Cart = () => (
  <div className="min-h-screen bg-red-600 text-center p-4 flex items-center justify-center">
    Cart Page
  </div>
);

export default function AppRouter() {
  const pathname = usePathname();

  return (
    <html
      lang="en"
      suppressHydrationWarning
      className="bg-lightBody dark:bg-darkBody"
    >
      <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
      </head>
      <body className="min-h-screen">
        <AnimatePresence mode="popLayout" initial={false}>
          {pathname}
          <motion.div
            key={pathname}
            initial={{ opacity: 1, x: "100%" }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: "-30%" }}
            transition={{
              type: "spring",
              stiffness: 300,
              damping: 30,
              duration: 0.2,
            }}
          >
            {pathname === "/" && <Home />}
            {pathname === "/favorites" && <Favorites />}
            {pathname === "/account" && <Account />}
            {pathname === "/cart" && <Cart />}
          </motion.div>
        </AnimatePresence>
        <BottomNav />
      </body>
    </html>
  );
}

[pppdns]

Any update? Is this on the roadmap for an upcoming Next.js release?

[leerob]

Hey everyone, I wanted to share one solution that might be relevant for you all. Here was my use case:

• I needed to animate between different routes, from / to an individual product page
• The URL should update when changing routes, and both clicking back in the navbar and the browser back button need to work
• Reloading the page on the product detail page /p/[slug] needs to correctly start on the detail state (no animation)

I can definitely empathize with this being confusing, and apologize we haven't done enough to create examples or show how this could be possible. For example, trying to animate across routes using framer-motion (now motion) using the default page files in the App Router won't work exactly – you can't use the layoutId to transition the element. You might think – okay, maybe I need to use intercepted routes for a modal-like pattern, but that also isn't the right solution here.

The solution I landed on is this:

• I'm using motion to animate between my two different "states" in the app (grid of products, product detail page)
• When clicking on a product, we start the animation but also shallow update the URL with window.history.pushState
• We add a useEffect to listen to the popstate event to handle the browser back action
• We have a /p/[slug]/page.tsx route, which has the detail page, to handle direct linking or reloads post-animation

This isn't perfect – for example, if you manually swipe back in iOS Safari. The most ideal solution here is View Transitions, which you can use https://next-view-transitions.vercel.app for in some cases. However, I couldn't get it working perfectly for the animation I was going for in this case, and also there isn't Firefox support yet for View Transitions. I do believe this is the best solution in the future though.

• Code: https://github.com/leerob/next-minimal-store
• Demo: https://nextzy.vercel.app/

CleanShot.2024-12-29.at.14.56.21.mp4

Hope this helps! 🙏

[ST4LTH]

Bro worked for Yeezy 🥶

[gerardmarquinarubio]

The main problem is that there is not a straight-forward solution for what it otherwise is a common requirement. This was also not a problem with the pages router (using framer-motion there works perfectly). It's nice that we can hack our way around by pushing and listening to history state changes but I can't see how this is an acceptable solution and not a momentary workaround.

[hyunjunian]

Thank you for the kind solution!

[ioetbc]

Hey @leerob thanks for the solution, although the github link 404s, would you mind re-linking?

[leerob]

Here is the relevant code:

// app/page.tsx
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [_, startTransition] = useTransition();

const handleProductClick = (product: Product) => {
  startTransition(() => {
    setSelectedProduct(product);
    window.history.pushState(null, '', `/p/${product.id}`);
  });
};

const handleBack = useCallback(() => {
  startTransition(() => {
    setSelectedProduct(null);
    window.history.pushState(null, '', '/');
  });
}, []);

useEffect(() => {
  const handleKeyDown = (event: KeyboardEvent) => {
    if (selectedProduct) {
      if (event.key === 'Escape') {
        handleBack();
      }
    }
  };

  window.addEventListener('keydown', handleKeyDown);

  return () => {
    window.removeEventListener('keydown', handleKeyDown);
  };
}, [selectedProduct, handleBack]);

useEffect(() => {
  const handlePopState = () => {
    const productId = window.location.pathname.split('/').pop();
    if (productId && productId !== '') {
      const product = products.find((p) => p.id === productId);
      if (product) {
        setSelectedProduct(product);
      } else {
        setSelectedProduct(null);
      }
    } else {
      setSelectedProduct(null);
    }
  };

  window.addEventListener('popstate', handlePopState);

  return () => {
    window.removeEventListener('popstate', handlePopState);
  };
}, []);

Then, having the file-system routing for app/p/[slug]/page.tsx which renders the same UI component.

I probably should have just posted this in the first place, shorter! P.S. we have more updates to come on this issue now that React is exploring built-in View Transitions.

[ynamite]

For people still looking for a solution, check out https://github.com/ismamz/next-transition-router.
Using it here, works great: https://www.massif.ch/en/

[miguderp]

Ah! Fair point, I thought it was "2 weeks" ago and not "2 months"

[ynamite]

Unmaintained? @ismamz

[NickWoodward]

already unmaintaned tho

is it?

[ismamz]

@ynamite I was on vacation, now I'm catching up on some new issues. Let me know if there's anything you want to see from the library. By the way, awesome implementation! 👏

[ignaciogiri]

@ismamz Yes! I think it would be amazing if we could achieve your transitions without freezing the route somehow. That's a deal breaker for me. It's so frustrating that parallel page transitions can be done with Nuxt, Pages Router, Astro, Barba, etc., but not the App Router.

[carloitaben]

You can also achieve something quite similar to what next-transition-router does under the hood by using useTransition with React 19. It's not a lot code and allows for further customization. For example you can allow passing custom properties to the transition callbacks, like an animation name, in case you want to do something like this:

<TransitionRouter
  leave={async ({ from, to, animationName }) => {
    switch (animationName) {
      case "fade":
        await animate(...)
        break
      case "scale":
        await animate(...)
        break
    }
  }}
  enter={async ({ from, to, animationName }) => {
    switch (animationName) {
      case "fade":
        await animate(...)
        break
      case "scale":
        await animate(...)
        break
    }
  }}
/>

// Usage

<Link
  href="/about"
  onClick={(event) => {
    event.preventDefault()
    startRouteTransition("fade", () => {
      router.push("/about")
    })
  }}
/>

It could also be used with any other router that uses React Transitions for client navigation 🙂 here's the gist

[leerob]

Good news everyone, View Transitions support has landed under an experimental flag. It's still very early, but open to feedback.

https://nextjs.org/blog/next-15-2

[sengirab]

Looking forward to more explanation / documentation for this. Really nice!

[leerob]

Some early demos here:

• https://x.com/delba_oliveira/status/1897701817431044124
• https://x.com/charca/status/1897667770550255772
• https://x.com/asidorenko_/status/1898108075241783395

[lezan]

Hello there,
with Next 15.3.0 onNavigate landed. They states here

This API can be used to implement transition animations

Does it means it changes something about app router and exit animation?

[robinkarlberg]

I like how they explain that it CAN be used for it, but there are no examples anywhere HOW it should be used for it.

[carloitaben]

One way to achieve this is by creating a custom component that wraps next/link and does the following:

href={props.href}
onNavigate={async (event) => {
  event.preventDefault()
  await animate(...)
  router.push(props.href)
}}

Then, somewhere in a template.tsx, play the exit animation if needed.

I personally link animations to router transitions because it offers some nice performance improvements. React executes the route change in the background while the animation plays. Once both actions are complete, it commits the navigation. Here's how I'm doing it using onNavigate 🙂

[hatsumatsu]

One way to achieve this is by creating a custom component that wraps next/link and does the following:

This looks really promising, do you happen to have a demo of this approach?