Page Transitions/Animations Using Framer Motion

[salemlf]

I plan on migrating my app to Tanstack Router, but I wanted to know what implementing page transitions with Framer Motion would look like? React Router v6 makes animating page transitions kind of a pain compared to v5, and seemingly impossible in the case of nested routes, which is one of many reasons I want to migrate.

I'm currently using React Router v6 with AnimatePresence and an outlet. Wondering if I'd use a similar approach in Tanstack Router, and I'd appreciate examples as I've been unable to find any in the docs so far.

Thanks!

[AltwargEvan]

This article talks about how to do it with NextJs. https://blog.stackademic.com/how-to-perfect-slide-in-and-slide-out-page-transitions-in-next-js-with-framer-motion-67a2f320762

This should work the same way with Tanstack. In the PageTransitionLayout component, you will need to use useRouter from tanstack. The key prop for motion.div should be router.state.location.pathname I think

[egor-xyz]

How to do not in nextJS? Just in react

[Ashilex]

I can enter animate but not exit...
I set a key on motion component but nothing.

I think AnimatePresence component should wrap around the route component we want to exit. If we follow the linked guide, Router seems to remove from DOM tree the AnimatePresence which in turn is not able to detect route unmounting.
If you wrap Outlet component you can verify this and see how the exit animation is applied, to the new route though.

[egor-xyz]

It worked with react-router-dom when I added location and key. Is it possible to do the same with the tanstack router?

 <Routes
        location={location}
        key={location.pathname}
      >

[fauxparse]

Okay, I think I've cracked this! The trick seems to be keeping hold of the old router context and using that when the component is on the way out. Thankfully, TSR exposes all the context stuff you need to make this work:

const AnimatedOutlet = forwardRef<HTMLDivElement>((_, ref) => {
  const RouterContext = getRouterContext();

  const routerContext = useContext(RouterContext);

  const renderedContext = useRef(routerContext);

  const isPresent = useIsPresent();

  if (isPresent) {
    renderedContext.current = cloneDeep(routerContext);
  }

  return (
    <motion.div ref={ref} {...transitionProps}>
      <RouterContext.Provider value={renderedContext.current}>
        <Outlet />
      </RouterContext.Provider>
    </motion.div>
  );
});

Then in your parent component:

const Root = () => {
  const matches = useMatches();
  const match = useMatch({ strict: false });
  const nextMatchIndex = matches.findIndex((d) => d.id === match.id) + 1;
  const nextMatch = matches[nextMatchIndex];

  return (
    <main>
      <AnimatePresence mode="popLayout">
        <AnimatedOutlet key={nextMatch.id} />
      </AnimatePresence>
    </main>
  );
};

I haven't tested this super extensively, but initial results seem promising.

Notes:

• I haven't included the transitionProps here, but it's your standard Framer Motion stuff like initial, animate, and exit. Do whatever.
• This uses deepClone from lodash because I was in a hurry and had lodash in the project anyway, but you can substitute any deep clone function. The important part is that it MUST clone context.store.state: just saving a reference to the old context won't cut it.
• This probably won't work with nested (animated) routes without some extra finesse (but I might be wrong!)

Would love to know if anyone uses this, and how you get on!

[JoshGlazebrook]

Using the above as-is, I keep seeing Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in my console. Is this expected?

[CamBurris]

When I tried implementing this, I was getting this error: TypeError: Cannot read private member #defaultOptions from an object whose class did not declare it. This was happening because I was putting a TanStack Query client into the router context. The clone of the query client causes issues. I fixed it by cloning the routerContext and then manually assigning options.context back to the previous options.context.

Code:

if (isPresent) {
  const clone = cloneDeep(routerContext);
  clone.options.context = routerContext.options.context;

  renderedContext.current = clone;
}

[CamBurris]

Anyone else have issues with <Link />/useLinkProps() with this solution? When you pass in a from prop to either, clicking the link will throw an error saying Invariant failed: Could not find match for from. Here is a sandbox reproducing the issue: https://stackblitz.com/edit/tanstack-router-wdrreu. Go to the About page and then click the Test link.

[TheOrdinaryWow]

<AnimatePresence mode="popLayout">
        <AnimatedOutlet key={nextMatch.id} />
      </AnimatePresence>

Just got same error here. It seems that 404 is not caught.

Got solved by modifying:

<AnimatedOutlet key={nextMatch ? nextMatch.id : ""} />

[imSamiul]

Anyone else have issues with <Link />/useLinkProps() with this solution? When you pass in a from prop to either, clicking the link will throw an error saying Invariant failed: Could not find match for from. Here is a sandbox reproducing the issue: https://stackblitz.com/edit/tanstack-router-wdrreu. Go to the About page and then click the Test link.

@CamBurris did you find any solution? I am facing the same problem on the <Link> component. It can't find the match.

[GuyFromEkb]

I can't get it to work too.

[fauxparse]

@GuyFromEkb Did you try what I posted above? If so, I'd be curious to know where it's going wrong for you, as this may help me to make a more robust version.

[AndreiTS]

[fauxparse]

This will have the same problem, where the exiting component will switch to the new route.

[AndreiTS]

Yes, you're right. I'm using your solution now and it's working.

[CamBurris]

Here is a solution using react transition group:

export const AnimatedOutlet = () => {
  const matches = useMatches();
  const match = useMatch({ strict: false });
  const matchIndex = matches.findIndex((d) => d.id === match.id);
  const nextMatchIndex =
    matchIndex === matches.length - 1 ? matchIndex : matchIndex + 1;
  const nextMatch = matches[nextMatchIndex];

  const RouterContext = getRouterContext();
  const routerContext = useContext(RouterContext);
  const renderedContext = useRef(routerContext);
  const isPresent = useRef(true);

  if (isPresent.current) {
    const clone = cloneDeep(routerContext);
    clone.options.context = routerContext.options.context;
    renderedContext.current = clone;
  }

  return (
    <FadeTransition
      mountOnEnter={true}
      unmountOnExit={true}
      appear={true}
      transitionKey={nextMatch.pathname}
      onEnter={() => {
        isPresent.current = true;
      }}
      onExit={() => {
        isPresent.current = false;
      }}
    >
      <RouterContextProvider router={renderedContext.current}>
        <Outlet />
      </RouterContextProvider>
    </FadeTransition>
  );
};

export const FadeTransition = ({
  transitionKey,
  children,
  ...props
}: Props) => {
  const nodeRef = useRef(null);

  return (
    <SwitchTransition>
      <CSSTransition
        {...props}
        key={transitionKey}
        timeout={150}
        nodeRef={nodeRef}
      >
        <TransitionCont ref={nodeRef}>{children}</TransitionCont>
      </CSSTransition>
    </SwitchTransition>
  );
};