title: Flicking pages when navigating between pages
body: <p>So i have researched a lot but did not come to conclusion.</p>
  <p>I am using a library for scrolling in two of my pages, i am using react-router here is the code in app.js :</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import { BrowserRouter, Routes, Route } from &quot;react-router-dom&quot;;
  import About from &quot;./Views/About&quot;;
  import Contact from &quot;./Views/Contact&quot;;
  import Home from &quot;./Views/Home&quot;;
  import Navbar from &quot;./Components/Navbar&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import Footer from &quot;./Components/Footer&quot;;
  import Projects from &quot;./Views/Projects&quot;;
  
  function App() {
    return (
  
      &lt;BrowserRouter&gt;
        &lt;Navbar /&gt;
        &lt;Routes&gt;
          &lt;Route element={&lt;Home /&gt;} path=&quot;/&quot; /&gt;
          &lt;Route element={&lt;About /&gt;} path=&quot;/about&quot; /&gt;
          &lt;Route element={&lt;Contact /&gt;} path=&quot;/contact&quot; /&gt;
          &lt;Route element={&lt;Projects /&gt;} path=&quot;/projects&quot; /&gt;
        &lt;/Routes&gt;
        &lt;Footer /&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>and my home page code is this :</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Home.css&quot;;
  import InfoSection from &quot;../Components/InfoSection&quot;;
  import CardInfo from &quot;../Components/CardInfo.js&quot;;
  import {
    Animator,
    ScrollContainer,
    ScrollPage,
    batch,
    Fade,
    FadeIn,
    FadeOut,
    Move,
    MoveIn,
    MoveOut,
    Sticky,
    StickyIn,
    StickyOut,
    Zoom,
    ZoomIn,
    ZoomOut,
  } from &quot;react-scroll-motion&quot;;
  
  function Home() {
    return (
      &lt;ScrollContainer&gt;
        &lt;ScrollPage&gt;
          &lt;Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}&gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;50px&quot; }}&gt;
              CONTRAIN TECHNOLOGIES
            &lt;/span&gt;
          &lt;/Animator&gt;
        &lt;/ScrollPage&gt;
        &lt;ScrollPage&gt;
          &lt;Animator animation={batch(StickyIn(), FadeIn(), ZoomIn())}&gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;40px&quot; }}&gt;
              WELCOME
            &lt;/span&gt;
          &lt;/Animator&gt;
        &lt;/ScrollPage&gt;
        &lt;ScrollPage&gt;
          &lt;Animator animation={batch(Fade(), Move(), Sticky())}&gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;40px&quot; }}&gt;
              TO THE ROBOTIC WORLD
            &lt;/span&gt;
          &lt;/Animator&gt;
        &lt;/ScrollPage&gt;
        &lt;ScrollPage&gt;
          &lt;div
            style={{
              display: &quot;flex&quot;,
              justifyContent: &quot;center&quot;,
              alignItems: &quot;center&quot;,
              height: &quot;100%&quot;,
            }}
          &gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;40px&quot; }}&gt;
              - THE CONTRAIN TEAM -
              &lt;Animator animation={MoveIn(-1000, 0)}&gt;JOEL SPOLEN&lt;/Animator&gt;
              &lt;Animator animation={MoveIn(1000, 0)}&gt;MAHDI KAMANKESH&lt;/Animator&gt;
              &lt;Animator animation={MoveOut(1000, 0)}&gt;WALTHER ERICSSON&lt;/Animator&gt;
              &lt;Animator animation={MoveOut(-1000, 0)}&gt;JILL SPOLEN&lt;/Animator&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/ScrollPage&gt;
        &lt;ScrollPage&gt;
          &lt;Animator animation={batch(Fade(), Sticky())}&gt;
            &lt;span style={{ fontSize: &quot;40px&quot; }}&gt;WELCOME AGAIN&lt;/span&gt;
            &lt;br /&gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;30px&quot; }}&gt;
              WE ARE CREATING ROBOTICS HANDS
            &lt;/span&gt;
          &lt;/Animator&gt;
        &lt;/ScrollPage&gt;
        &lt;InfoSection /&gt;
        &lt;ScrollPage&gt;
          &lt;Animator animation={batch(Fade(), Move(), Sticky())}&gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;40px&quot; }}&gt;
              &lt;CardInfo /&gt;
            &lt;/span&gt;
          &lt;/Animator&gt;
        &lt;/ScrollPage&gt;
        &lt;div style={{ height: &quot;60vh&quot; }}&gt;&lt;/div&gt;
        &lt;InfoSection /&gt;
        &lt;ScrollPage&gt;
          &lt;Animator animation={batch(Fade(), Move(), Sticky())}&gt;
            &lt;span className=&quot;topicParagraph-font&quot; style={{ fontSize: &quot;40px&quot; }}&gt;
              &lt;CardInfo /&gt;
            &lt;/span&gt;
          &lt;/Animator&gt;
        &lt;/ScrollPage&gt;
        &lt;div style={{ height: &quot;60vh&quot; }}&gt;&lt;/div&gt;
      &lt;/ScrollContainer&gt;
    );
  }
  
  export default Home;
  
  </code></pre>
  <p>My home page is flicking when i navigate back to the home page , does anyone have a solution for this ? Thanks</p>