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>

back to TransitionLinkup next TransitionState