AniLink
AniLink is a wrapper around the TransitionLink component and provides four default transitions: fade, paintDrip, swipe, and cover.
Check out the default transitionsin action.
Requirements
AniLink is built with gsap so you'll need to install it first.
yarn add gsap
npm i gsap
Usage
Import AniLink into the page you want to use it on
import AniLink from "gatsby-plugin-transition-link/AniLink";
Transition
Pick one of the default transitions (paintDrip, swipe, cover, or fade) and add it as a blank prop.
<AniLink fade to="page-4">
Go to Page 4
</AniLink>
Duration
If you'd like, override the animation duration in seconds
<AniLink paintDrip to="page-3" duration={1}>
Go to Page 3
</AniLink>
Direction
For directional transitions use left, right, up, or down.
<AniLink swipe direction="up" to="page-4">
Go to Page 4
</AniLink>
Top
For the swipe transition, you can assign wether the entering or exiting page should be on top
<AniLink swipe top="exit" to="page-4">
Go to Page 4
</AniLink>
<AniLink swipe top="entry" to="page-5">
Go to Page 5
</AniLink>
Note: for the swipe transition you'll likely need to assign a background color to your pages.
entryOffset
For the Swipe transition, set the entering pages offset in percent.
<AniLink swipe top="entry" to="page-5" entryOffset={80}>
Go to Page 5
</AniLink>
Color, hex
To set the colour of the overlay with PaintDrip, use either the hex or color props.
<AniLink paintDrip to="page-3" color="rebeccapurple">
Go to Page 3
</AniLink>
<AniLink paintDrip to="page-3" hex="#663399">
Go to Page 3
</AniLink>
bg
To set the background of the overlay in the Cover transition, use the bg
prop. bg forwards through an assignment for the css background property. This allows you to set a colour or use a background image if you'd like.
<AniLink cover to="page-3" bg="#663399">
Go to Page 3
</AniLink>
<AniLink
cover
to="/"
direction="left"
duration={3}
bg="
url(https://source.unsplash.com/random)
center / cover /* position / size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
white /* color */
"
>
Go home with a random unsplash background
</AniLink>