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.

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

[J4v4Scr1pt]

No credit to me but to the authour on this stackblitz: https://stackblitz.com/edit/nextjs-framer-motion-template-p2cr5m?file=app%2FPageTransitionEffect.tsx.

Works like a charm for me. But I added inital={false} to AnimatePresence to ignore inital animation.

[power-f-GOD]

It's 2024.🥲

Cc: @leerob

[NickWoodward]

People should really be told this prior to learning the App router :/

[kavyantic]

Even with this bug/issue in place, I don't want to use page router at all for newer projects. Still looking forward to an update with fixes. I have large projects which requires these basic features.

[ancashoria]

I'm actually looking to switch to Astro because of all these issues I've been having with Next.js. And I only started using v14.xx, I can't imagine what the users of 13.xx have gone through.

[NickWoodward]

yeah I came to nextjs from astro and thinking about shifting back

[kavyantic]

looks good to me but it is not a react wrapper, If you really want an alternative but stay in Reactjs ecosystem, I would recommend RemixJS. It's another robust fullstack react framework.

[eltitano]

It's funny how nobody from the Next.js team is even the slightest bit involved in this discussion. As a newcomer, you immediately feel the cozy warmth of a user-oriented framework.

[leerob]

👋 Update here:

• For Next.js, it appears Framer Motion is not planning a fix and recommends the View Transitions API. This API does not yet have wide cross-browser support, but it is making progress.
• We’ve pushed a package with CSS View Transitions API helpers for the App Router: https://next-view-transitions.vercel.app/
• We’d still like to figure out a solution to make Framer Motion work with the App Router

[leerob]

It's not Framers issue or problem, to fix - it's works perfectly fine in Gatsby or the pages directory or any other React framework. This is a NextJS issue for the app directly and should be fixed by the next team... it's only been a couple of years now

Framer is not currently compatible with the React server & routing features the Next.js App Router is built on. This discussion is focused specifically on the App Router (unrelated to other frameworks).

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.

Not trying to pass it to them. As I mentioned, we've provided the Framer folks some guidance and want to work with them on a solution. The same goes for another animation libraries wanting to support these React concurrent features.

[rijk]

Is that guidance publicly available somewhere? Framer motion is open source so if you know what should be done it would allow someone (Vercel/community) to do a PR if there’s changes required to the library. This could then be used as reference for other animation libraries in the future, but I have a feeling most people are using framer motion anyway.

[ynamite]

I agree with @rijk, it would be interesting to know what framer would have to change to make view transitions work with the App Router.

[ismamz]

This is the solution I've been using to add page transitions in Next.js App Router: next-transition-router.

The idea is similar to next-view-transitions created by @shuding and recommended by @leerob to use View Transition API but in this case, any other animation library like Framer Motion, GSAP, or even CSS animations can be used.

You could do things like this (see full example with framer-motion on StackBlitz):

'use client';

import { motion } from 'framer-motion';
import { useTransitionState } from 'next-transition-router';

export function Box({ color }: { color: string }) {
  const { stage } = useTransitionState();

  const variants = {
    leaving: { scale: 0 },
    entering: { scale: 1 },
  };

  return (
    <motion.div
      className={`w-32 h-32 ${color}`}
      initial={{ scale: 0 }}
      animate={stage === 'leaving' ? variants.leaving : variants.entering}
      transition={{ duration: 0.5 }}
    />
  );
}

'use client';

import { useRef } from 'react';
import { TransitionRouter } from 'next-transition-router';
import { animate } from 'framer-motion/dom';

export default function Providers({ children }: { children: React.ReactNode }) {
  const wrapperRef = useRef<HTMLDivElement>(null!);

  return (
    <TransitionRouter
      auto
      leave={(next) => {
        animate(
          wrapperRef.current,
          { opacity: [1, 0] },
          { duration: 0.5, onComplete: next }
        );
      }}
      enter={(next) => {
        animate(
          wrapperRef.current,
          { opacity: [0, 1] },
          { duration: 0.5, onComplete: next }
        );
      }}
    >
      <div ref={wrapperRef}>{children}</div>
    </TransitionRouter>
  );
}

You can also see the full demo code using GSAP on GitHub.

I hope it helps you!

[ynamite]

@ismamz thanks for the tipp, this works great!
@shuding awesome work!

[efibootmgr]

Wow, nice to see this

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

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