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.

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>
      {({ transitionStatus }) => {
        return (
            <Box
              className="box"
              pose={
                ['entering', 'entered'].includes(transitionStatus)
                  ? 'visible'
                  : 'hidden'
              }
            />
        )
      }}
</TransitionState>