Next.js Discord

Discord Forum

Next Page Transition (using React Transition Group)

Unanswered
Milkfish posted this in #help-forum
Open in Discord
MilkfishOP
Hey guys !
Got a small question, is it possible, using React Transition Group, to load the other page before launching the exit transition of the current page ? (It's for an animation), i would like do kind of a mask effect with the current page and the other page we switched on

3 Replies

Round sardinella
To use React Transition Group you can use this:

'use client';

import { useContext, useRef } from 'react';

import { LayoutRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { usePathname } from 'next/navigation'; // Import your pathname utility
import { CSSTransition, TransitionGroup } from 'react-transition-group';

function FrozenRouter({ children }: { children: React.ReactNode }) {
  const context = useContext(LayoutRouterContext);
  const frozen = useRef(context).current;

  return (
    <LayoutRouterContext.Provider value={frozen}>
      {children}
    </LayoutRouterContext.Provider>
  );
}

export default function Transition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <TransitionGroup className="transitionGroup">
      <CSSTransition 
          key={pathname}
          className="transition"
        >
        <FrozenRouter>
           {children}
        </FrozenRouter>
      </CSSTransition>
    </TransitionGroup>
  );
}
Without the FronzenRouter the animations wont work.
Florida White
just tested it and indeed it works. Tough, what a mess to call this {LayoutRouterContext} from this shitty path that will inevitably break again in future versions....