Installation

TransitionLink requires that you both add it to gatsby-config.js and import it as a page component.

Add TransitionLink to your project

yarn add gatsby-plugin-transition-link

npm i gatsby-plugin-transition-link

Add TransitionLink to gatsby-config.js.

// gatsby-config.js
module.exports = {
    plugins: [
      `gatsby-plugin-transition-link`
    ]
];

Import it in your pages and components

import TransitionLink from 'gatsby-plugin-transition-link'

Note: mixing Gatsby's Link and TransitionLink will prevent the scroll position from being updated when navigating using Gatsby's Link. To prevent this problem import Link from gatsby-plugin-transition-link instead of from gatsby.

import Link from 'gatsby-plugin-transition-link'

Usage with gatsby-plugin-layout

(and other persistent layouts)

Since it was difficult to get layouts working properly with this plugin, I've added layout support to TransitionLink. Remove gatsby-plugin-layout and other persistent layouts from your project and add your Layout component as an option in gatsby-config.js.

// gatsby-config.js
module.exports = {
    plugins: [
       {
          resolve: "gatsby-plugin-transition-link",
          options: {
              layout: require.resolve(`./src/components/Layout.jsx`)
            }
       }
    ]
];

Note: when you add a layout component option, be sure to not also include this component in your pages or you will end up with the layout nested inside itself.