This tutorial will show you how to animate page content as you navigate from one page of your Gatsby site to the next. The effect we'll use is similar to a Fade In/Fade Out, and is shipped as the default effect in gatsby-v2-plugin-page-transitions, which is the plugin we'll install. Check out the plugin's docs on Gatsby for information on how to implement custom transitions.  

IMPORTANT! Please note that the installation instructions you'll find on the plugin's page are WRONG. They didn't update the instructions after updating the plugin to v2. Use these instructions instead. 

Prerequisites 

Your version of Gatsby must be 2.0 or later. 

Steps

1. First, you have to install the gatsby-v2-plugin-page-transitions plugin:

yarn add gatsby-v2-plugin-page-transitions

or

npm install --save gatsby-v2-plugin-page-transitions

2. Add the plugin to your gatsby-config.js file:

  {
    resolve: 'gatsby-v2-plugin-page-transitions',
    options: {
      transitionTime: 500
    }
  }

You can pick whatever transition time (in milliseconds) that you like. I chose 500 for my own purposes.

3. Implement page transitions in each of your pages.

At the top of each file, import the PageTransition component:

import PageTransition from 'gatsby-v2-plugin-page-transitions'

Next, wrap the contents that you want animated in the PageTransition component. If you happen to be wrapping multiple children at the same nesting level, you'll need to include a fragment wrapper, included in the below example:

<PageTransition>
  <>
    <MyPageContents/>
  </>
</PageTransition>

Do this for each of your pages.

4. Restart the gatsby develop process.

5. You're all set! Try it out!

undefined