Clunky page transition using nextjs

[theairbend3r]

I'm trying to implement a simple page transition using nextjs + react-spring.

Inside my _app.js, I have the following component. Is this the right way to do page transitions? I'm attempting a simple fade-in/fade-out when navigating to different pages, but the animation seems clunky.

• Expected behaviour: current page slowly fades out and next page slowly fades in.
• Current behavious: I see a flash of next page before the current page fades out and then the next page fades in.

Is this an issue with my transition params or did I set my _app.js incorrectly?

const App = ({ Component, pageProps }) => {
      const router = useRouter()
      const transition = useTransition(router.pathname, {
          from: { opacity: 0 },
          enter: { opacity: 1 },
          leave: { opacity: 0 },
          exitBeforeEnter: true,
      })

      return (    
          <div>
              <GlobalStyles />
              <Layout>
                  {transition(
                      (style, item) =>
                          item && (
                              <animated.div style={style}>
                                  <Component {...pageProps} />
                              </animated.div>
                          )
                  )}
              </Layout>
          </div>
      )
  }

[joshuaellis]

Do you have a code sandbox you could share? Easier to diagnose what's happening!

But, off the top of my head, I imagine it's the router updating after first paint.

[theairbend3r]

Do you have a code sandbox you could share? Easier to diagnose what's happening!

I've created a codesandbox here: https://codesandbox.io/s/next-spring-test-j7f94t

But, off the top of my head, I imagine it's the router updating after first paint.

Interesting. Do we know any quick fixes for this wrt react-spring?

[theairbend3r]

Using reset: true in useTransition seems to fix it.