A benefit of doing client-side routing is, as developers, we have more control over how we want to handle the transition from one page to the next. With React Router, we gain fine-grained control at a per-component level. Let's take advantage of this and animate the transition between different routes with the help of Framer Motion.
What we're creating
The tutorial focuses on a step-by-step approach to animating a React app which is using React Router for routing. We'll start with a simple fade-in/fade-out animation by animating the opacity of the component. We'll then look at how we can animate the position to create a slide animation and finally we can leverage multiple variants (animation states) to have a different animation for mounting and unmounting the components when the route changes.
The video tutorial
Animating mount and unmount
AnimatePresence is the key component for easily animating the route transitions. It's job is to determine whether a component is mounting or unmounting and play an animation on our <motion />
components. The routes we want to animate are within the <Switch/>
component will mount and unmount but we also need to tell AnimatePresence if we want to animate at all, this is where the key prop comes in. We don't want to trigger an animation when we navigate to the same route, using the location.pathname
as the key results in an animation which only triggers when we change to a new route.
<AnimatePresence>
<Switch location={location} key={location.pathname}>
<Route path="/about" component={About} />
<Route path="/settings" component={Settings} />
<Route path="/" component={Home} />
</Switch>
</AnimatePresence>
Variants
Using variants in Framer Motion is an easy way to define the different animation states we want to transition between. Take the following example:
const pageVariants = {
initial: {
opacity: 0,
},
in: {
opacity: 1,
},
out: {
opacity: 0,
}
};
We can now reuse the animations we defined in pageVariants
, initial will be state which the component starts on. When the component mounts, it will animate from the initial
state to the in
state. AnimatePresence adds another state to our component which it expects to also be defined, exit
. When the component unmounts, it will animate between the in
and out
defined in our animate
and exit
props respectively.
<motion.div
initial="initial"
animate="in"
exit="out"
variants={pageVariants}
>
We leverage this behaviour in React Router. As the route changes the Switch
component determines which component to show. Each component is wrapped in a <motion.div>
with animation states defined and thus the transition animations are played. It's as easy as that.
Where to go from here
Framer Motion is easy to use and page transitions aren't too difficult to get working, I recommend experimenting with different transitions and getting comfortable with animations and variants. For more information, the Framer Motion documentation is a great place to start - it has simple examples to learn from.
Resources
- Source code for the tutorial is available on GitHub
- Framer Motion Documentation
- My previous tutorial video - Scroll-up Reveal animation in Framer Motion
Top comments (0)