Now let’s define the states in our variant, in the order they occur: scaleDown, out, in, center, and scaleUp. Using arrays of variants let us define multiple animation states or steps, and it’s especially common once an animation becomes more complex. You can learn more about this “custom app” file from the Next docs here, but what it does is give us an entry point at the very top of the component tree.įunction MyApp(. To start, we need to make some changes to the page and component hierarchy so that the animation we create only runs when a route change happens.Īdd a new file named _app.js inside of a /pages directory.
Once you have Next.js set up, install Framer Motion as a dependency of your project npm install framer-motion. You can do this by installing Next locally on your computer or using a service like Codesandbox to spin up a new instance. Make sure you have an instance of Next.js set up and running.
If Next.js isn’t your jam, the overall approach this article demonstrates can be used in other React frameworks like Gatsby, or Create React App. For a more in-depth intro, check out Getting Started with Framer Motion. This article won’t cover all of the basics of Framer Motion, but it’s detailed enough for anyone to follow along even if you haven’t used it before.