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.