Transitions are firing too early when using _app.js page component in Next.JS 6

Question

I am trying to set up a relatively simple page transition within Next JS. I am using GSAP TweenLite as my animation library, and I am react-transition-group to handle the transitions, and I am trying to do all of this in the _app.js component that was introduced in Next.js 6.0. I have it "sort of" working, but it's not doing exactly what I want it to do.

The issue that I am having is that when a new route is hit, the page component for that route immediately transitions in at the top of the DOM and the Exiting component gets pushed to the bottom of the page until it transitions out and unmounts.

What I am wanting it to do is transition and unmount the current page component, and then transition and mount the new page component when the route changes. If anyone has any advise on how I could set this up better I would appreciate it greatly.

//GSAP Animations
const fadeIn = node => {
  TweenLite.set(node, {
    opacity: 0
  });
  TweenLite.to(node, 1, {
    opacity: 1,
    ease: Power2.easeInOut
  });
};

const fadeOut = node => {
  TweenLite.set(node, {
    opacity: 1,
    scale: 1
  });
  TweenLite.to(node, 1, {
    opacity: 0,
    scale: 0.5,
    ease: Power2.easeInOut
  });
}; 

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }


  render() {
    const { Component, pageProps, style } = this.props;
    return (
      <Container>
          <Layout>
            <TransitionGroup>
              <Transition
                key={this.props.router.pathname}
                timeout={1000}
                in={true}
                onEnter={fadeIn}
                onExit={fadeOut}
                mountOnEnter={true}
                unmountOnExit={true}
              >
                <Component {...pageProps} />
              </Transition>
            </TransitionGroup>
          </Layout>
      </Container>
    );
  }
}

Answer 1

Whilst I don't have the exact answer to your question, hopefully reviewing the code in the example below will help you resolve your issue.

https://github.com/xavczen/nextjs-page-transitions

Another approach would be to use the following module:

https://github.com/illinois/next-page-transitions