How to use framer motion animation with swiper.js (React)?

Question

So the animations are only occurring during the initial page reload. I want the animations to execute every time I scroll down to another page. How do I use react-router with swiper and framer or is there any other way to do it. This is my app.js

import React, { useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Home from "./Home";
import Works from "./Works";
import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Navbar from "./Navbar";

import SwiperCore, {
  Mousewheel,
  Keyboard,
  Pagination,
  Navigation,
} from "swiper";

// install Swiper modules
SwiperCore.use([Mousewheel, Pagination]);

export default function App() {
  let i = 0;
  return (
    <>
      <Swiper
        onScroll={() => {
          //console.log("Scrolled");
          localStorage.setItem("scrolled", (i = i + 1));
          console.log(localStorage.getItem("scrolled"));
        }}
        direction={"vertical"}
        slidesPerView={1}
        spaceBetween={30}
        mousewheel={true}
        className="mySwiper"
      >
        <SwiperSlide>
          <Home />
        </SwiperSlide>
        <SwiperSlide>
          <Works />
        </SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

This is one of my components Home.js

import React, { useEffect, useState } from "react";
import "./App.css";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import "./mainpage.css";
import cloud1 from "./images/cloud1.svg";
import cloud02 from "./images/cloud02.svg";
import cloud2 from "./images/cloud2.svg";
import moon from "./images/moon.svg";
import cloud3 from "./images/cloud3.svg";
import cloud01 from "./images/cloud01.svg";
import { useNavigate } from "react-router-dom";
import {
  MouseParallaxChild,
  MouseParallaxContainer,
} from "react-parallax-mouse";
import Navbar from "./Navbar";
import { motion, useViewportScroll, useTransform } from "framer-motion";

function Home() {
  const fadeLeft = {
    hidden: { opacity: 0, x: -100 },
    visible: { opacity: 1, x: 0 },
  };

  const fadeRight = {
    hidden: { opacity: 0, x: 100 },
    visible: { opacity: 1, x: 0 },
  };

  const [loading, setloading] = useState(false);
  useEffect(() => {
    setloading(true);
    setTimeout(() => {
      setloading(false);
    }, 1000);
  }, []);

  return (
    <MouseParallaxContainer className="App">
      {loading ? (
        <ClimbingBoxLoader size={20} color={"#F37A24"} loading={loading} />
      ) : (
        <MouseParallaxContainer
          className="main-page"
          containerStyles={{
            width: "100%",
            overflow: "none",
          }}
        >
          <Navbar />
          <motion.h1
            variants={fadeLeft}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.5 }}
            className="heading"
          >
            SASWATA
          </motion.h1>
          <motion.h1
            variants={fadeLeft}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.5 }}
            className="heading2"
          >
            GHOSH
          </motion.h1>
          <motion.span
            variants={fadeLeft}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.7 }}
            className="bar1"
          ></motion.span>
          <motion.span
            variants={fadeLeft}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.85 }}
            className="bar2"
          ></motion.span>
          <motion.p
            variants={fadeLeft}
            initial="hidden"
            animate="visible"
            transition={{ duration: 1 }}
            className="para"
          >
            web developer
          </motion.p>
          <p className="scrolldown">SCROLL DOWN</p>
          <span className="verticaline"></span>
          <MouseParallaxContainer
            className="moon"
            containerStyles={{
              width: "100%",
              overflow: "none",
            }}
          >
            <MouseParallaxChild
              className="moon_text"
              factorX={0.01}
              factorY={0.01}
            >
              <motion.p
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.5 }}
              >
                PORTFOLIO
              </motion.p>
            </MouseParallaxChild>
            <MouseParallaxChild
              className="moon_img"
              factorX={0.03}
              factorY={0.05}
            >
              <motion.img
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.7 }}
                src={moon}
                alt=""
              />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud01"
              factorX={0.04}
              factorY={0.06}
            >
              <motion.img
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.8 }}
                src={cloud01}
                alt=""
              />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud02"
              factorX={0.03}
              factorY={0.05}
            >
              <motion.img
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.5 }}
                src={cloud02}
                alt=""
              />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud_front1"
              factorX={0.04}
              factorY={0.07}
            >
              <motion.img
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.7 }}
                src={cloud1}
                alt="cloud1"
              />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud3"
              factorX={0.03}
              factorY={0.05}
            >
              <motion.img
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.5 }}
                src={cloud3}
                alt=""
              />
            </MouseParallaxChild>
            <MouseParallaxChild
              className="cloud2"
              factorX={0.06}
              factorY={0.05}
            >
              <motion.img
                variants={fadeRight}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.5 }}
                src={cloud2}
                alt="cloud2"
              />
            </MouseParallaxChild>
          </MouseParallaxContainer>
          <div className="nav-left">
            <span style={{ width: "40px" }} className="span1"></span>
            <span style={{ width: "25px" }} className="span2"></span>
            <span style={{ width: "25px" }} className="span3"></span>
            <span style={{ width: "25px" }} className="span4"></span>
          </div>
        </MouseParallaxContainer>
      )}
    </MouseParallaxContainer>
  );
}

export default Home;

After going through several videos and documentation I was not able to figure it out.

Answer 1

Your SwiperSlide component has access to isActive render function.

<Swiper>
  <SwiperSlide>First Slide without animation</SwiperSlide>
  <SwiperSlide>
    {({ isActive }) => (
      <motion.div initial={{ opacity: 0, scale: 0.5 }}
                  animate={{
                    opacity: isActive ? 1 : 0,
                    scale: isActive ? 1 : 0.5, }}
                  >This is animated Second Slide
      </motion.div>
    )}
  </SwiperSlide>
</Swiper>

Don't put anything outside of the render function inside SwiperSlide component otherwise nothing will render.