@mjso/gatsby-plugin-transition-link

A link component for page transitions in gatsby.

1.16.2
latest
Source
npm

Version published: 5 years ago

Maintainers: 1

Created: 5 years ago

Source

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

Make sure you have yarn installed.
Create a new folder to be used as your yarn workspace. mkdir transitionlink-workspace
Inside your workspace folder, clone this repo.
cd into this repo and run yarn && yarn watch. Leave this terminal window open.
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).
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"
	]
}

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.

Keywords

FAQs

What is @mjso/gatsby-plugin-transition-link?

Is @mjso/gatsby-plugin-transition-link well maintained?

Package last updated on 25 Nov 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@mjso/gatsby-plugin-transition-link