A link component for page transitions in gatsby
Branch: master
Clone or download
Tyler bump version
Latest commit c3a98e6 Feb 15, 2019


alt text

Gatsby Plugin Transition Link

TransitionLink provides a simple api for describing expressive transitions between pages in Gatsbyjs. Page links are used to determine which transition should fire, making page transitions flexible and easy to use.

TransitionLink is compatible with declarative react animation libraries like react-pose and react-spring. It's also compatible with imperative animation libraries like gsap and anime.js

Sites that use TransitionLink


  • Per-Link transitions
  • Fine control of page mounting and unmounting timing
  • Function or state based transitions with <TransitionLink />
  • Transition state and status with <TransitionState /> and in your page & template props
  • Display animation content above your pages with <TransitionPortal />
  • Use default transitions with <AniLink />


For info on using TransitionLink refer to the docs. The source for the docs site is available here.


  1. Fork this repo
  2. Run yarn && yarn watch from the root directory.
  3. In another terminal window cd into the lib directory and run yarn link.
  4. cd to the project directory you want to test it out on and run yarn link gatsby-plugin-transition-link.
  5. copy .eslintrc.json to the root of your project.
  6. gatsby develop

Now when you make changes to the TransitionLink src folder, they will reflect in your project.

Feature requests and PR's are welcome! If you're having a problem please leave an issue and I'll help you out asap.