TransitionPortal

If you have some animation elements which need to sit ontop of both pages you can achieve that using TransitionPortal which is a regular React portal.

import { TransitionPortal } from "gatsby-plugin-transition-link";

<TransitionPortal>
  <SomeAnimationComponent>
    This component will sit on top of both pages.
  </SomeAnimationComponent>
</TransitionPortal>

If you need more control over the z-index of your portal you can assign it one of three levels: bottom, middle, or top. These have z-index values of 1000, 1100, and 1200 respectively. The default level is middle.

<TransitionPortal>
  <SomeAnimationComponent>
    This component will sit on top of both pages.
  </SomeAnimationComponent>
</TransitionPortal>
<TransitionPortal level="top">
  <SomeOtherAnimationComponent>
    This component will sit on top of both pages and the other portal.
  </SomeAnimationComponent>
</TransitionPortal>