Framer Motion - AnimatePresence

This is the third post in the series where I have been sharing my learnings as I learn FramerMotion. You can check out the first two posts here — (post 1, post 2).

AnimatePresence **component facilitates running exit animations as elements are removed from the react tree(unmounted**). This is actually pretty handy because react does not provide any lifecycle method to run some logic before a component is unmounted and delay the unmounting before the logic has completed running.

How does it work ?

In the above example, the 2 divs have the same animation in animate prop. The second motion.div is wrapped within the AnimatePresence Component. We are toggling a state variable on button click to make the divs mount and unmount.

AnimatePresence works by detecting the unmounting of the direct child or children. All the direct children should have a unique key prop, the significance of which we will discuss below. If the direct child unmounts (the 2nd motion.div )(on button click in this example), the animation provided in the exit prop runs.

The exit prop can even be provided to all the motion components within the direct child and those animations will run too.

Animating Page transitions — React router Dom

While transitioning from PAGE-1 to PAGE-2, we can run exit animations on PAGE — 1 and vice versa.

In the above example we have 2 routes, “/” which renders Home page, and “/profile”, which renders profile page.

As you switch between the pages, you would notice that the opacity of the word — “Home or Profile” is animated to 0 (for, e.g. when going from home to profile, the word “home” disappears and then the page transition occurs).

The routes are defined in a separate component called AnimatedRoutes, since we need to use the useLocation hook, which is only available in components wrapped under BrowserRouter.

export default function AnimatedRoutes() {
const location = useLocation();
console.log(location.pathname);
return (
<AnimatePresence mode="wait">
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</AnimatePresence>
);
}

We have wrapped the Routes component with AnimatePresence.

mode=”wait” means the old component is animated out before the new component enters.

As mentioned above, we need to give a unique key prop to the direct child of AnimatePresence. location.pathname (2 possible values in this example / or “/profile”) is used as the key. Whenever a component’s key changes, React considers that a new component, so the old component is unmounted and the new one is added to the react tree.

With this info, let’s see how the exit animation works in the above example during page transitions.

1 — When the current page is home, key’s value is “/”

2 — When you navigate to profile, key’s value becomes “/profile”

3 — As key changes, React unmounts the old component which is the home page

4 — AnimatePresence detects this unmounting and runs exit animations on all the motion components nested inside the homepage (all which have the exit prop), in this case we have exit prop on 1 motion.div inside Home component.

5 — Once the animation is complete, the page is transitioned to “/profile”.

I will be sharing more such posts as I continue to explore Framer motion.

Open to discussions on twitter