npm package: @onlytabs/gatsby-plugin-transition-link
Description: A link component for page transitions in gatsby.
Author: Tyler Barnes
Latest version: 1.5.3-alpha.3

## Disclaimer :warning: :fire: :loudspeaker:

> **Branch [fork/onlytabs](https://github.com/jacekk/gatsby-plugin-transition-link/tree/feature/swipe-bottom-offset) in this very repo is a collection of all features and fixes I've PRed to the original/source [repo](https://github.com/TylerBarnes/gatsby-plugin-transition-link). I needed them all and quite fast, so I've also published a scoped package in the [registry](https://www.npmjs.com/package/@onlytabs/gatsby-plugin-transition-link). Feel free to use it, but have in mind it is more a playground than a stable and well thought set of features.**

![alt text](https://raw.githubusercontent.com/TylerBarnes/gatsby-plugin-transition-link/master/images/gatsby-plugin-transition-link.png "Gatsby Plugin Transition Link logo")

# Gatsby Plugin Transition Link

TransitionLink provides a simple api for describing expressive transitions between pages in [Gatsbyjs](https://www.gatsbyjs.org/). 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](https://popmotion.io/pose/) and [react-spring](https://react-spring.surge.sh/). It's also compatible with imperative animation libraries like [gsap](https://greensock.com) and [anime.js](http://animejs.com/)

## Sites that use TransitionLink

- [strandrover.com](https://strandrover.com/)
- [Demo site](https://gatsby-plugin-transition-link.netlify.com/)
- [bare.ca](https://bare.ca/)
- [TransitionLink docs](https://transitionlink.tylerbarnes.ca/) [[source]](https://github.com/TylerBarnes/TransitionLinkDocs/)
- [Edit this file to add yours!](https://github.com/TylerBarnes/gatsby-plugin-transition-link/blob/master/readme.md)

## 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](https://transitionlink.tylerbarnes.ca/). The source for the docs site is available [here](https://github.com/TylerBarnes/TransitionLinkDocs/).

## Contributing

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

6. 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](https://www.conventionalcommits.org/en/v1.0.0-beta.3/) 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.