NextJS route Stack transitions

This repo is an example of NextJS route transitions via a Stack component whose purpose is to render flexible “how” and “when” the playIn and playOut of each page component is played.

The main goal is to have the same Stack logic existing on @cher-ami/router but on nextJS file system routing. Secondary, to be able to handle route transitions without a DOM bound animation library like React Spring. This example is animated with GSAP, but could be with any other libs.

How it works

When the user update the browser history by clicking on “About” link, the Stack will render two pages components:

App
 |_ Stack
      |_ Home          (prev page playOut)
      |_ About         (current page playIn)

When the transition is complete, prev page is unmount.

App
 |_ Stack
      |_ About

In order to do this, each page register for the parent Stack component a playIn and playOut function + the DOM root element via useImperativeHandle. The Stack can thus be able to access these properties.

const Home = forwardRef((props, handleRef) => {
  const $root = useRef(null)
  useImperativeHandle(handleRef, () => ({
    playIn: () => gsap.timeline().fromTo($root.current, { autoAlpha: 0 }, { autoAlpha: 1 }),
    playOut: () => gsap.timeline().to($root.current, { autoAlpha: 0 }),
    $root: $root.current,
  }))
})

Otherwise, the root App component will manage the transitions function added to Stack component by props. We can now control the scenario with previous and current page components \o/

function App({ Component, pageProps }) {
  const custom = useCallback(
    ({ prev, current }) =>
      new Promise(async (resolve) => {
        // playOut prev page component
        if (prev) await prev.playOut?.()
        // when playOut is complete, playin new current page component
        await current.playIn?.()
        resolve()
      }),
    []
  )
  return (
    <div className={"App"}>
      <Stack Component={Component} customTransitions={custom} />
    </div>
  )
}

Test it online

nextjs-stack-transitions.vercel.app

Install the example

Clone the repos and move to the cloned repository:

git clone <this-repos> && cd nextjs-route-stack-transitions-example

Install dependencies:

npm i
# or
yarn

Run the nextJS dev-server:

npm run dev

Credits

Willy Brauner

GitHub

View Github