title: How to use framer motion animation with swiper.js (React)?
body: <p>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</p>
  <pre><code>import React, { useRef, useState } from &quot;react&quot;;
  import { Swiper, SwiperSlide } from &quot;swiper/react&quot;;
  import Home from &quot;./Home&quot;;
  import Works from &quot;./Works&quot;;
  import &quot;./styles.css&quot;;
  import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import &quot;swiper/css&quot;;
  import &quot;swiper/css/pagination&quot;;
  import &quot;swiper/css/navigation&quot;;
  import Navbar from &quot;./Navbar&quot;;
  
  import SwiperCore, {
    Mousewheel,
    Keyboard,
    Pagination,
    Navigation,
  } from &quot;swiper&quot;;
  
  // install Swiper modules
  SwiperCore.use([Mousewheel, Pagination]);
  
  export default function App() {
    let i = 0;
    return (
      &lt;&gt;
        &lt;Swiper
          onScroll={() =&gt; {
            //console.log(&quot;Scrolled&quot;);
            localStorage.setItem(&quot;scrolled&quot;, (i = i + 1));
            console.log(localStorage.getItem(&quot;scrolled&quot;));
          }}
          direction={&quot;vertical&quot;}
          slidesPerView={1}
          spaceBetween={30}
          mousewheel={true}
          className=&quot;mySwiper&quot;
        &gt;
          &lt;SwiperSlide&gt;
            &lt;Home /&gt;
          &lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;
            &lt;Works /&gt;
          &lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 3&lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 4&lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 5&lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 6&lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 7&lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 8&lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;Slide 9&lt;/SwiperSlide&gt;
        &lt;/Swiper&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>
  <p>This is one of my components Home.js</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import ClimbingBoxLoader from &quot;react-spinners/ClimbingBoxLoader&quot;;
  import &quot;./mainpage.css&quot;;
  import cloud1 from &quot;./images/cloud1.svg&quot;;
  import cloud02 from &quot;./images/cloud02.svg&quot;;
  import cloud2 from &quot;./images/cloud2.svg&quot;;
  import moon from &quot;./images/moon.svg&quot;;
  import cloud3 from &quot;./images/cloud3.svg&quot;;
  import cloud01 from &quot;./images/cloud01.svg&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  import {
    MouseParallaxChild,
    MouseParallaxContainer,
  } from &quot;react-parallax-mouse&quot;;
  import Navbar from &quot;./Navbar&quot;;
  import { motion, useViewportScroll, useTransform } from &quot;framer-motion&quot;;
  
  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(() =&gt; {
      setloading(true);
      setTimeout(() =&gt; {
        setloading(false);
      }, 1000);
    }, []);
  
    return (
      &lt;MouseParallaxContainer className=&quot;App&quot;&gt;
        {loading ? (
          &lt;ClimbingBoxLoader size={20} color={&quot;#F37A24&quot;} loading={loading} /&gt;
        ) : (
          &lt;MouseParallaxContainer
            className=&quot;main-page&quot;
            containerStyles={{
              width: &quot;100%&quot;,
              overflow: &quot;none&quot;,
            }}
          &gt;
            &lt;Navbar /&gt;
            &lt;motion.h1
              variants={fadeLeft}
              initial=&quot;hidden&quot;
              animate=&quot;visible&quot;
              transition={{ duration: 0.5 }}
              className=&quot;heading&quot;
            &gt;
              SASWATA
            &lt;/motion.h1&gt;
            &lt;motion.h1
              variants={fadeLeft}
              initial=&quot;hidden&quot;
              animate=&quot;visible&quot;
              transition={{ duration: 0.5 }}
              className=&quot;heading2&quot;
            &gt;
              GHOSH
            &lt;/motion.h1&gt;
            &lt;motion.span
              variants={fadeLeft}
              initial=&quot;hidden&quot;
              animate=&quot;visible&quot;
              transition={{ duration: 0.7 }}
              className=&quot;bar1&quot;
            &gt;&lt;/motion.span&gt;
            &lt;motion.span
              variants={fadeLeft}
              initial=&quot;hidden&quot;
              animate=&quot;visible&quot;
              transition={{ duration: 0.85 }}
              className=&quot;bar2&quot;
            &gt;&lt;/motion.span&gt;
            &lt;motion.p
              variants={fadeLeft}
              initial=&quot;hidden&quot;
              animate=&quot;visible&quot;
              transition={{ duration: 1 }}
              className=&quot;para&quot;
            &gt;
              web developer
            &lt;/motion.p&gt;
            &lt;p className=&quot;scrolldown&quot;&gt;SCROLL DOWN&lt;/p&gt;
            &lt;span className=&quot;verticaline&quot;&gt;&lt;/span&gt;
            &lt;MouseParallaxContainer
              className=&quot;moon&quot;
              containerStyles={{
                width: &quot;100%&quot;,
                overflow: &quot;none&quot;,
              }}
            &gt;
              &lt;MouseParallaxChild
                className=&quot;moon_text&quot;
                factorX={0.01}
                factorY={0.01}
              &gt;
                &lt;motion.p
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.5 }}
                &gt;
                  PORTFOLIO
                &lt;/motion.p&gt;
              &lt;/MouseParallaxChild&gt;
              &lt;MouseParallaxChild
                className=&quot;moon_img&quot;
                factorX={0.03}
                factorY={0.05}
              &gt;
                &lt;motion.img
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.7 }}
                  src={moon}
                  alt=&quot;&quot;
                /&gt;
              &lt;/MouseParallaxChild&gt;
              &lt;MouseParallaxChild
                className=&quot;cloud01&quot;
                factorX={0.04}
                factorY={0.06}
              &gt;
                &lt;motion.img
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.8 }}
                  src={cloud01}
                  alt=&quot;&quot;
                /&gt;
              &lt;/MouseParallaxChild&gt;
              &lt;MouseParallaxChild
                className=&quot;cloud02&quot;
                factorX={0.03}
                factorY={0.05}
              &gt;
                &lt;motion.img
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.5 }}
                  src={cloud02}
                  alt=&quot;&quot;
                /&gt;
              &lt;/MouseParallaxChild&gt;
              &lt;MouseParallaxChild
                className=&quot;cloud_front1&quot;
                factorX={0.04}
                factorY={0.07}
              &gt;
                &lt;motion.img
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.7 }}
                  src={cloud1}
                  alt=&quot;cloud1&quot;
                /&gt;
              &lt;/MouseParallaxChild&gt;
              &lt;MouseParallaxChild
                className=&quot;cloud3&quot;
                factorX={0.03}
                factorY={0.05}
              &gt;
                &lt;motion.img
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.5 }}
                  src={cloud3}
                  alt=&quot;&quot;
                /&gt;
              &lt;/MouseParallaxChild&gt;
              &lt;MouseParallaxChild
                className=&quot;cloud2&quot;
                factorX={0.06}
                factorY={0.05}
              &gt;
                &lt;motion.img
                  variants={fadeRight}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
                  transition={{ duration: 0.5 }}
                  src={cloud2}
                  alt=&quot;cloud2&quot;
                /&gt;
              &lt;/MouseParallaxChild&gt;
            &lt;/MouseParallaxContainer&gt;
            &lt;div className=&quot;nav-left&quot;&gt;
              &lt;span style={{ width: &quot;40px&quot; }} className=&quot;span1&quot;&gt;&lt;/span&gt;
              &lt;span style={{ width: &quot;25px&quot; }} className=&quot;span2&quot;&gt;&lt;/span&gt;
              &lt;span style={{ width: &quot;25px&quot; }} className=&quot;span3&quot;&gt;&lt;/span&gt;
              &lt;span style={{ width: &quot;25px&quot; }} className=&quot;span4&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/MouseParallaxContainer&gt;
        )}
      &lt;/MouseParallaxContainer&gt;
    );
  }
  
  export default Home;
  
  </code></pre>
  <p>After going through several videos and documentation I was not able to figure it out.</p>