React-spring: Page transition in Next.js, component flash when change route.

[rainstormza]

I try to implement page transition in Nextjs.

I follow your demo with react-router-dom and it works fine.
https://codesandbox.io/s/1xjj3mqqj

But when I move to nextjs look like animation always flash when I change the route.
http://test-router.surge.sh/
https://github.com/rainstormza/next-route-animation

Not sure what's wrong, but when I use this config animation not flash, but still not as smooth as react-router-dom

  from={{
              opacity: 0,
              position: 'absolute',
              width: '100%',
              height: '100%'

            }}

[CosmaTrix]

Hi @rainstormza, you have to make sure the items array gets updated when you navigate. That is telling the Transition component what needs to be rendered and what not. Try to change the render method in _app.js to something like this

const items = [
  {
    id: this.props.router.route,
    Component: this.props.Component,
    pageProps: this.props.pageProps,
  },
];

return (
  <Container>
    <Transition
      native
      unique
      items={items}
      keys={items => items.id}
      from={{ opacity: 0 }}
      enter={{ opacity: 1 }}
      leave={{ opacity: 0, position: 'absolute' }}
    >
      {({ Component, pageProps }) => (styles) => (
        <animated.div style={styles}>
          <Component {...pageProps} />
        </animated.div>
      )}
    </Transition>
  </Container>
);

In this case the items array will contain always one item, your current page. The children function of Transition will receive that item and will animate in/out your pages.

Just be aware of the fact that SSR isn't currently working and Next.js outputs an empty string when using Transition. There's already a conversation going on about his topic.

[rainstormza]

@CosmaTrix
I tried your way but the result still almost the same, but I think animation smoother than before with your configuration. :)

There are two things that I mention here.
The first thing about a flash component when change page. (https://github.com/drcmda/react-spring/issues/322)
The second thing about when change page the previous item still remain. (without position: 'absolute',)
Not sure why I have to use absolute.

Anyway, I look into this repo (https://github.com/xavczen/nextjs-page-transitions/blob/master/pages/_app.js), they use react-spring v5 everything seem ok.

I try to navigate that demo animation won't flash (or remain) (https://page-transitions.now.sh/)

thanks for your help.

[CosmaTrix]

Hey @rainstormza, because you're not controlling the items through the items array, what you'll see on screen is always be the current page. It's actually rendered twice during transitions: one entering and one leaving. That is probably why you see the page flashing.

I've created a Sandbox with an example similar to yours. (https://codesandbox.io/s/z30v5vj50x)[https://codesandbox.io/s/z30v5vj50x]. As you see there's no jumping/flashing. 😉

Another small thing to notice in my example is that I've wrapped the Transition component (in _app.js) with a div that has position relative. That prevents the leaving components to "jump" when position absolute is applied to it.

I hope that helps!

[rainstormza]

@CosmaTrix It works.
You are correct about items, and position relative and width: 100% make the page not jumping.
Anyway, about jumping I tried to remove position: relative but everything still ok.
Does it involve about page jumping really?

[aequasi]

This doesn't work super well if you use the useRouter hook from nextjs. as the props there are all the props for the new page being rendered, so thinks like dynamic pages dont work unless you store the old value with something like react-use's usePrevious