Framer motion exit animation not working with react vite on visual studios

Question

I'm asking for a bit of help with a project im currently building. It's being constructed in Visual Studios with React Vite. Im using Framer motion to be able to transition between pages. but for some reason the exit animation is not working, the initial works fine.

I am using the AnimatePresence correctly and have all the children components wrapped in motion brackets.

here is my AnimatedRoutes.jsx page below below:

import React from "react";
import { Routes, Route, useLocation } from "react-router-dom";
import Home from "../pages/Home";
import Contact from "../pages/Contact";
import About from "../pages/About";
import { AnimatePresence } from "framer-motion";

function AnimatedRoutes() {
  const location = useLocation();

  return (
    <AnimatePresence mode="wait">
      <Routes key={location.pathname} location={location}>
        <Route path="/" element={<Home />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </AnimatePresence>
  );
}

export default AnimatedRoutes;

my About.jsx Page:

import React from "react";
import { Container, Row, Col, Button } from "react-bootstrap";
import { motion } from "framer-motion";
import { slideInLeft, slideInRight, fadeInOut } from "../animation";
import AboutPhoto from "../Images/JoelDisney.png";

function About() {
  return (
    <Container>
      <motion.div
        key="/"
        initial="hidden"
        animate="show"
        exit="exit"
        transition={{ duration: 2, staggerChildren: 1 }}
      >
        <div className="justify-content-center">
          <motion.h2 variants={fadeInOut}>Get To Know Me</motion.h2>
        </div>
        <Row>
          <Col xl={6} lg={6} className="hx-about-content col-hidden">
            <div className="col-about">
              <div className="hx-site-title">
                <motion.div key="section-title" variants={slideInLeft}>
                  <span>Expert Web Developer & Designer</span>
                  <h2 className="section-title">Get to Know Me</h2>
                </motion.div>
              </div>
              <motion.div key="text" variants={slideInLeft}>
                <p>
                  I'm a first-generation Mexican American graduate with a unique
                  blend of expertise in both computer science and psychology,
                  holding a Bachelor's degree in both fields. With over six
                  years of experience in the industry, I bring a deep
                  understanding of user behavior and cognitive processes to my
                  work, allowing me to craft user-centric and intuitive web
                  experiences.
                </p>
                <p>
                  My technical background in computer science equips me with the
                  skills to turn creative designs into functional and responsive
                  web applications. I thrive on staying at the forefront of
                  emerging web technologies, ensuring that the websites I build
                  are not only aesthetically pleasing but also perform
                  flawlessly across various platforms and devices. My passion
                  for creating seamless digital experiences is driven by a
                  commitment to bridging the gap between technology and human
                  psychology, resulting in websites that engage and delight
                  users while achieving business goals.
                </p>
                <p>
                  I'm passionate about staying on the cutting edge of web
                  development, embracing new challenges, and collaborating in
                  dynamic environments. Feel free to review my work and reach
                  out to me in the contact page.
                </p>
              </motion.div>
              <motion.div key="btns" variants={slideInLeft} className="btns">
                <Button variant="outline-light" href="/Contact">
                  Contact Me
                </Button>
              </motion.div>
            </div>
          </Col>
          <Col className="col-img" lg={6} xl={6}>
            <motion.div key="hx-about-img" variants={slideInRight}>
              <div className="hx-about-img">
                <motion.img
                  whileHover={{ scale: 1.3 }}
                  whileTap={{ scale: 0.9 }}
                  transition={{ duration: 0.5 }}
                  src={AboutPhoto}
                />
              </div>
            </motion.div>
          </Col>
        </Row>
      </motion.div>
    </Container>
  );
}

export default About;

my App.jsx page:

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import NavBar from "./Components/NavBar";
import AnimatedRoutes from "./Components/AnimatedRoutes";
import "bootstrap/dist/css/bootstrap.min.css";
import "./Style/App.css";
import SocialMenu from "./Components/SocialMenu";

function App() {
  return (
    <Router>
      <NavBar />
      <AnimatedRoutes />
      <SocialMenu />
    </Router>
  );
}

export default App;

here is my animation.jsx page were I created all my variables:

export const slideInLeft = {
    hidden: { x: "-120%", filter: "blur(5px)" },
    show: {
      x: 0,
      filter: "blur(0px)",
      ease: "easeInOut",
      transition: { duration: 1.4 },
    },
    exit: {
      x: "-120%",
      filter: "blur(5px)",
      ease: "easeOut",
      transition: { duration: 3 },
    },
  };

  export const slideInRight = {
    hidden: { x: "300%", filter: "blur(5px)" },
    show: {
      x: 0,
      filter: "blur(0px)",
      ease: "easeIn",
      transition: { delay: 0.1, duration: 1, ease: "easeInOut" },
    },
    exit: {
      x: "400%",
      filter: "blur(5px)",
      ease: "easeOut",
      transition: { duration: 3 },
    },
  };

  export const slideUp = {
    hidden: { y: "100%", filter: "blur(5px)" },
    show: {
      y: 0,
      filter: "blur(0px)",
      ease: "easeIn",
      transition: { duration: 1.5 },
    },
    exit: {
      y: "-100%",
      filter: "blur(5px)",
      ease: "easeOut",
      transition: { duration: 3 },
    },
  };
  
  export const fadeInOut = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      ease: "easeInOut",
      transition: { duration: 1 },
    },
    exit: { opacity: 0, ease: "easeInOut", transition: { duration: 1 } },
  };

here is my package.json

  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "****",
      "version": "0.0.0",
      "dependencies": {
        "@emailjs/browser": "^3.11.0",
        "bootstrap": "^5.3.2",
        "framer-motion": "^10.9.1",
        "kursor": "^0.1.6",
        "react": "^18.2.0",
        "react-bootstrap": "^2.8.0",
        "react-dom": "^18.2.0",
        "react-icons": "^4.11.0",
        "react-router-dom": "^6.16.0"
      },

I appreciate any help thanks!

Answer 1

My man, are you using the Link component from react-router-dom? I mean, I got the same error as you, but I noticed that I was using the <a> tag, and that kinda of refreshes the page, not letting the exit animation to trigger, so I changed my code:

from this:

    import { motion } from "framer-motion";

const liVariants = {
    hover: {
        scale: 1.1,
        y: -5,
        fontWeight: "bold",
        textDecoration: "underline",
        transition: { type: "spring", stiffness: 120 }
    }
}

export const Navbar = () => {
    return (
        <nav>
            <ul className="flex items-center justify-end gap-5 divide-x-2">
                <motion.li
                    variants={liVariants}
                    whileHover="hover"
                >
                    <a href="/">Home</a>
                </motion.li>

                <motion.li
                    variants={liVariants}
                    whileHover="hover"
                >
                    <a href="/gymleaders">Gym Leaders</a>
                </motion.li>
            </ul>
        </nav>
    )
}

To this: (Yes, I took off the motion from these components)

import { Link } from 'react-router-dom'

export const Navbar = () => {
    return (
        <nav>
            <ul className="flex items-center justify-end gap-5 divide-x-2">
                <Link to="/">Home</Link>   
                <Link to="/gymleaders">gymleaders</Link>
                <Link to="/eliteFour">eliteFour</Link>   
            </ul>
        </nav>
    )
}

And worked! Btw, don't mind this example, I'm practicing framer-motion with pokemon themes :D