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.
0 kommentar(er)
