59 lines
2.9 KiB
Markdown
59 lines
2.9 KiB
Markdown
|
|
|
|
# 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
|
|
|
|
- [incentro.com](https://www.incentro.com/en/)
|
|
- [peintagone.be](https://www.peintagone.be/)
|
|
- [strandrover.com](https://strandrover.com/)
|
|
- [hiddenwork.ca](https://www.hiddenwork.ca/)
|
|
- [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.
|
|
1. Create a new folder to be used as your yarn workspace. `mkdir transitionlink-workspace`
|
|
1. Inside 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.
|