/gatsby-plugin-transition-link

A link component for page transitions in gatsby

Primary LanguageJavaScript

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

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. Make sure you have yarn installed.
  2. Create a new folder to be used as your yarn workspace. mkdir transitionlink-workspace
  3. Inside your workspace folder, clone this repo.
  4. cd into this repo and run yarn && yarn watch. Leave this terminal window open.
  5. Beside this repo in your workspace folder, add a gatsby site that uses transition link for testing purposes (you can copy/paste the example site from this repo if needed).
  6. In your workspace folder create a package.json and add the following:
{
	"private": true,
	"workspaces": [
		"example", <-- the name of your test site folder
		"gatsby-plugin-transition-link/lib"
	]
}
  1. In a new terminal window, cd to your workspace folder and run yarn && yarn workspace example run develop.

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

Please use the Conventional Commits specification for your commit messages.

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