Animate Page Transitions in Gatsby.js using react-transition-group

Instructor: [00:00] In this lesson you will learn how to animate page transitions in a Gatsby JS project. We will need two dependencies, Gatsby Plugin Layout and React Transition Group. First thing that we need to do is to add Gatsby Plugin Layout to our Gatsby config.

[00:17] By default, it will try to pick layout component from SRC layouts index.js. Let's go to layout component and see how it looks like and what purposes it serves. With layout component we can repeat some elements like our header component for example on every page and use children prop to display pages that we have.

[00:41] The main thing that we want from our layout component is its ability to inject additional props to the page. In our case we need location to use it in our transitions. Let's import our transition component which we still have to work on and wrap our children inside of it, providing the location prop to it.

[01:02] Now we are ready to work in our transition component. Firstly, we need to import transition group and transition from React Transition Group that we will use to animate our page transitions. Let's destructure children and location from props and add the part which is responsible for our transition. Transition group is nothing more than a state machine that manages mounting and unmounting of components over time.

[01:31] React transition interim tracks exit and enter statuses of the elements passed to it. React transition accepts key which is needed to understand when the components are entering or leaving the DOM and time out, which specifies the duration on enter and exit animations. We also need to provide styles which we want to use according to our transition status.

[01:59] Now we are ready to define our animation. Let's first specify timeout. We want it to be half a second. And our styles, which are just objects that we will spread down there according to the status of our animation. Note that this is just plain CSS and you can choose whatever you want to modify the appearance of your animation. Let's save our transition component and our layout component and see how it displays on the page.

[02:34] The animation is working, however it's not everything that I wanted to share with you in this lesson. Let's imagine the situation where we have a page that has some elements on it and we need to scroll before animating. You saw that before triggering animation our page jumped to the top. We can luckily fix that.

[02:58] We need to add the following lines into our Gatsby browser.js, which are a range of APIs that we can use to change how our website behaves. In this case we want to change scroll behavior with the help of should update scroll API. It has access to our location and the last position on the previous page.

[03:21] An important thing here that on any action performed on our location, we want to set a timeout with a duration of our transition before the page is scrolled to the top. We can save it and test our animation. Now we can see that we have successfully fixed our little visual bug.