This is the behavior we want, otherwise they'll happen at the same time and there could be a funky overlap between the animations and it might look like only one of the animations is firing. And then we pass an exitBeforeEnter prop to AnimatePresence so that Framer Motion will run any exit animation on an unmounting component before running the enter animation for a component that's about to mount on the page.

We also have to make sure to export wrapPageElement so Gatsby can use it. The syntax looks like your typical React functional component. wrapPageElement is used for more UI-related things that we want to wrap around all of our pages, such as a persistent layout or in our case here, AnimatePresence WrapRootElement is used for things like Providers that give our app access to data and things like that. Just what we want! We can use wrapPageElement to wrap all of our pages with a persistent AnimatePresence. This allows us to essentially wrap a component around all of our pages, without the wrapper getting unmounted on route changes. In the root of your project, you can create a gatsby-browser.js file (the file naming is important) and get access to all of these cool things! One of them is a hook called wrapPageElement. Luckily for us, Gatsby exposes some 'browser' APIs for us that we can use. How do we do that with Gatsby? We need a way to ensure that AnimatePresence is never getting unmounted during route changes! wrapPageElement It's ok for the children to mount and unmount just as long as AnimatePresence itself never does. So we would never see any exit animations getting fired. It might not look like it with how fast the pages load, but as each page unmounts, the ENTIRE thing unmounts, including that Layout component with AnimatePresence. Page transitions with Gatsbyīut how do we do this with Gatsby? Even if we create a Layout component that wraps its children with AnimatePresence and pull that Layout into all of our page files, they're all still separate instances of Layout. You can see a more fleshed out (albeit unstyled) example on CodeSandbox. Then all we have to do is use a motion component inside of those Home and About components and to use those animate and exit props. Routing like this allows AnimatePresence to stay rendered the entire time. So if I want to have an element look like it's fading in when it's rendered, I can play with the opacity: The basics of Framer Motion involve creating a motion component and passing some values to set the styles we want an element to start at and animate to. TL DR here's a CodeSandbox demo for implementing page transitions in a Gatsby site using Framer Motion's AnimatePresence component to enable enter and exit animations. Fun fact: this is the same methodology I used in this site for the page transitions 😉 Demo Using AnimatePresence allows us to give a motion component an exit animation.

Normally when you just use the motion component, you can animate a component as it's being mounted, but not as it's being unmounted. To give a visual sense of progression, of moving forwards or backwards in the course, we used Framer Motion's AnimatePresence component to enable components to animate out as they're removed from the React tree. When you're doing a lesson in Odyssey, you can navigate to the previous or next lesson, or select a completely different lesson altogether. In Odyssey, we used Framer Motion, a production-ready React animation library. The content just suddenly disappears and is just as suddenly replaced with new content. But on a web app it just suddenly changes. You know what I mean? With a native app, images or text will fade away or slide in. It's something we're so used to seeing already on our phones that when 'normal' websites don't have those kinds of transitions, it can feel a bit jarring when navigating from page to page. MotivationĪdding smooth transition animations can really help a site feel more like a native app. The smoother the user interface and experience, the fewer distractions and the more people can focus on what they came to the site to do: learn. Today, my team and I at Apollo GraphQL launched our brand new learning platform, Odyssey! We really want Odyssey to provide a place where developers can have a great learning experience through an approachable curriculum, interactive activities, and a polished UI. Some knowledge of Framer Motion is also helpful, but not necessary. This post assumes a basic knowledge of React and Gatsby.

Framer motion animate presence