Overview

TransitionLink is a simple way of describing a page transition via props on a Link component. For both entering and exiting pages you can specify a number of timing values, pass state to both pages, and trigger a function for each.

TransitionLink has been tested using gsap (my preferred method) and react-pose. It should also work with other react animation libraries and CSS transitions.

Check out TransitionLinkin action.

Other Components

The AniLink component is a wrapper around TransitionLink offering up a few default transitions.

The TransitionState component is used to access the transition state and status of the page it's used in.

The TransitionPortal component is a regular React portal that can help with positioning animation elements above both the entering and exiting pages.

Accessibility

This plugin respects the users preference to reduce motion. If prefers-reduced-motion is enabled via OS settings, animations will not be triggered.