Delaying route change in Gatsby

Question

Is there a way to delay a route change in Gatsby? I would use it to fade out a page before fading in the new page. I am doing this using the gatsby-browser api. Fading in the new page works well, but fading out the old one doesn’t work.

Answer 1

Without knowing what have you tried at all and how did you have achieved the fade-in effect. I would suggest another approach which is what I've always used to create page transitions (both fade-in, fade-out, and others): using gatsby-plugin-transition-link.

It allows you to create your custom animation or use some default or predefined, you can check its demo site here where there's an example of a few transitions.

For predefined transitions (the easiest way) you only need to import de component and use it like this:

import AniLink from "gatsby-plugin-transition-link/AniLink"

<AniLink paintDrip to="page-2">
  Go to Page 2
</AniLink>

For custom transitions, you need to define de entry and exit effect, such as:

<TransitionLink
  exit={{
    length: length,
    trigger: ({ exit, node }) =>
      this.someCustomDefinedAnimation({ exit, node, direction: "out" }),
  }}
  entry={{
    length: 0,
    trigger: ({ exit, node }) =>
      this.someCustomDefinedAnimation({ exit, node, direction: "in" }),
  }}
  {...props}
>
  {props.children}
</TransitionLink>

For further information check out their docs.

Moreover, there are a bunch of plugins for gatsby-page-transitions but they usually have a dirtiest and more complex integration, with also less feedback (in terms of global downloads).