lsirivong/gatsby-plugin-transition-link

A link component for page transitions in gatsby

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

• strandrover.com
• Demo site
• bare.ca
• TransitionLink docs [source]
• Edit this file to add yours!

Features

• 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 />

Usage

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

Contributing

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.