Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
October 17, 2020 00:47
December 3, 2018 20:20
October 17, 2020 00:46
November 19, 2018 18:25
October 17, 2020 10:30
December 17, 2018 18:00
October 17, 2020 10:30
June 28, 2022 11:20

⚠️⚠️⚠️ WARNING: This project is currently unmaintained. ⚠️⚠️⚠️

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. 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
  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.