TransitionState

You can use the TransitionState component to access transition state that was passed from TransitionLink anywhere in your components or pages. You also have access to the current page transition status.

Possible statuses are: entering, entered, exiting, and exited.

You will also have access to an argument called mount. This will be true when a page is either in the process of entering, or has entered, and will be false while a page is either exiting or has exited and unmounted.

Below is an example of using TransitionLink, TransitionState and react-pose together.

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

<TransitionLink
  to={props.to}
  exit={{ length: 0.5 }}
  entry={{ delay: 0.5 }}
  >
    Go to page 2
</TransitionLink>

const Box = posed.div({
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
})

<TransitionState>
      {({ mount, transitionStatus }) => {
        console.log(transitionStatus)
        return (
            <Box
              className="box"
              pose={
                mount
                  ? 'visible'
                  : 'hidden'
              }
            />
        )
      }}
</TransitionState>