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.

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>