How to use Page transitions in next.js

[pi43r]

Hello,

Total noob here. I don't quite understand how the useTransition function works.
How do I make it wait so that the leave transition can have an effect?

This is how I am currently implementing it:

import { useTransition, animated as a } from 'react-spring'
import useStore from '@/helpers/store'

const DOM = () => {
  const router = useStore((s) => s.router)
  const transitions = useTransition(router, {
    key: null,
    from: { opacitiy: 0, scale: 0, background: '#6f6f6f' },
    enter: { opacity: 1, scale: 1, background: '#0f0f0f' },
    leave: { opacity: 1, scale: 0 },
  })
  return (
    <>
      {transitions((style) => (
        <a.div
          className='absolute max-w-lg px-4 py-2 text-lg shadow-xl md:text-base top-8 left-1/2 text-gray-50 transform -translate-x-1/2'
          style={style}
        >
          <h1>Page 2!</h1>
        </a.div>
      ))}
    </>
  )
}

https://codesandbox.io/s/next-spring-ch3cn?file=/src/pages/box.jsx

🙏

Edit: This Code Sandbox is using react transitions, but not next.js https://codesandbox.io/s/router-transitions-4j2q2

[joshuaellis]

This would go in _app.js in the pages folder. Typically what i've done in the past for a basic fade in/out is have a div that covers the whole page that has an opacity 0 and the spring changes that to 1 through listening to router events. So on changeStart you would show the div covering the screen, on changeComplete you would hide it again giving the illusion the page faded out which is much simpler than trying to apply animated props correctly to the passed Component.

I can see you're using react-three-next you might have more luck asking in that repo because it messes with the app.js file.

[pi43r]

Thank you for the quick reply!
I see that it is not as trivial as adding the transition to an element. Unfortunately I am planning different transition effects for different pages, so I would need to pass the router events from _app down to the individual components.

But I couldn't even make the easy code snippet fire on any router events with react-three-next (They don't have a discussions area at this repo and I don't want to be annoying in the issues).
Maybe I can get around with just animating in, but it would be half way.

Thanks again for your help.

[pi43r]

Thanks @joshuaellis
The router object is actually working (just not logging in the sandbox window) and I can get away with mounting the listener on the component and triggering a spring change on routeChangeStart.
🎉🎉🎉

For completenes:

import { useSpring, animated as a } from 'react-spring'
import { useEffect } from 'react'

const DOM = () => {
  const router = useStore((s) => s.router)
  const [transition, api] = useSpring(() => ({
    from: { opacitiy: 0, scale: 0 },
    to: { opacity: 1, scale: 1, background: '#0e0e0e' },
  }))

  useEffect(() => {
    if (router) {
      const handleRouteChange = (url, { shallow }) => {
        console.log(
          `App is changing to ${url} ${
            shallow ? 'with' : 'without'
          } shallow routing`
        )
        api.start({ opacity: 0, scale: 0 })
      }

      router.events.on('routeChangeStart', handleRouteChange)

      // If the component is unmounted, unsubscribe
      // from the event with the `off` method:
      return () => {
        console.log('Router Listener Unmounted')
        router.events.off('routeChangeStart', handleRouteChange)
      }
    }
  }, [])

  return (
    <>
      <a.div
        className='absolute max-w-lg px-4 py-2 text-lg shadow-xl md:text-base top-8 left-1/2 text-gray-50 transform -translate-x-1/2'
        style={transition}
      >
        <h1>Page 2!</h1>
      </a.div>
    </>
  )
}