React Router + Animation libraries problems: components won't animate before unmounting with react-router-dom

Question

I have the following code:

import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";

const App = () => {
  return (
    <BrowserRouter>
      <AnimatePresence>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
        <Route path="/" exact={true} key="1">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 2 }}
            key="hi"
          >
            <Hi />
          </motion.div>
        </Route>
        <Route path="/something" exact={true} key="2">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            key="something"
            transition={{ duration: 2 }}
          >
            <Something />
          </motion.div>
        </Route>
      </AnimatePresence>
    </BrowserRouter>
  );
};

export default App;

It's supposed it has to do a fade in animation whenever the <Hi/> and <Something/> are mounted, and a fade out when they are unmounted. The mounting animation occurs, but the other one doesn't. Both components are unmounted before the animation effect starts, and the issue occurs with all the animation libraries: framer-motion, react-transition-group, and others.

score 0 · Answer 1 · answered May 19 '21 at 12:29

not sure if you're still looking for an answer but I solved a similar problem by adding the exitBeforeEnter flag to AnimatePresence.

So...

//...
<AnimatePresence exitBeforeEnter>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
//...

React Router + Animation libraries problems: components won't animate before unmounting with react-router-dom

1 Answers1