0

i am trying to make animation to the page that user will leave, so i have used this code to delay the scrolling to the next page so that the animation work before changing the page, the problem is user have to scroll only once and wait for the animation and the page to change, and when i keep scrolling (using the mouse wheel or touch pad) the animation loops and never changed, you can see the code pen that i created, do not stop scrolling to understand what is the problem.

  • what i what is to make animation when leaving the second page so when you at the second page and scroll down the animation start then the page changed.

  • what is happening is when you scroll now the animation keep looping until the stop scrolling which is a bad user experience.

      <body>
      <nav id="nav">

      </nav>
      <div id="fullpage">
          <div id="sec-1" class="section">
              <h4 class="ast-presint">ASTALIFT Presint</h4>
              <h1 class="title">White Jelly Aquarvsta</h1>
          </div>
          <div id="sec-2"  class="section">
              <img class="image-1" src="https://lh3.googleusercontent.com/proxy/vxPO4c9WyeUtBlFX0WXRzle0jUXY1yOR-YvO9evFDlWkIC2ikeUHJcQ97Xao4GGtikiAPa0MWrAuufl1ayJRWCW69K0pQLNCOo6BaVajcDJIS1ovyVMzoWaC-H_690Ho6WpGIk2tA5kU4iYhDm-pVkF001RktHHwyzsDMOnxaWC5XkJyUg" alt="">
              <img class="image-2" src="https://lh3.googleusercontent.com/proxy/vxPO4c9WyeUtBlFX0WXRzle0jUXY1yOR-YvO9evFDlWkIC2ikeUHJcQ97Xao4GGtikiAPa0MWrAuufl1ayJRWCW69K0pQLNCOo6BaVajcDJIS1ovyVMzoWaC-H_690Ho6WpGIk2tA5kU4iYhDm-pVkF001RktHHwyzsDMOnxaWC5XkJyUg" alt="">
              <img class="image-3" src="https://lh3.googleusercontent.com/proxy/vxPO4c9WyeUtBlFX0WXRzle0jUXY1yOR-YvO9evFDlWkIC2ikeUHJcQ97Xao4GGtikiAPa0MWrAuufl1ayJRWCW69K0pQLNCOo6BaVajcDJIS1ovyVMzoWaC-H_690Ho6WpGIk2tA5kU4iYhDm-pVkF001RktHHwyzsDMOnxaWC5XkJyUg" alt="">
              <h1 class="title-2">Unveil Your skin's Radiance</h1>
              <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
          </div>
          <div id="sec-1"  class="section">Some section</div>
          <div id="sec-1"  class="section">Some section</div>
      </div> 




  <script>
  var delay = 1000; //milliseconds
  var timeoutId;
  var animationIsFinished = false;



 /* Slide variable */
  var slideIndexBis = 1;
  var sliding = false;

  new fullpage('#fullpage',{
  fadingEffect:true, 
  fadingEffect:'slides',
  onLeave: function(origin, destination, direction){
      const section = origin.index;

      tl = new TimelineMax({delay:0.7});

      if (section === 1){
          var curTime = new Date().getTime();

          //animating my element
          tl.fromTo($('.title-2'),0.8,{scale: 1},{scale: 100, ease:                  Power1.easeIn, opacity:0})
          tl.fromTo($('.image-1'),0.2,{x: 0},{x: "100%", ease: Power1.easeIn})
          tl.fromTo($('.image-2'),0,{x: 0},{x: "100%"})
          tl.fromTo($('.image-3'),0,{y: 0},{y: "100%"})

          clearTimeout(timeoutId);

          timeoutId = setTimeout(function(){
              animationIsFinished = true;

              fullpage_api.moveTo(destination.index + 1);
          }, delay);

          return animationIsFinished;

      }

  },

    });

See the Pen PopmYEx by Ahmed Obad (@amo4oma)
naz
  • 29
  • 5
  • .fullpage() function is not default jQuery function. That code requires Fullpage JS . Please check - https://alvarotrigo.com/fullPage/ – Chipsy May 23 '21 at 18:25
  • thank you @Chipsy for your comment , i have changed the js code accourding to the link you sent, but the main issue that i am facing still there. -what i what is to make animation when leaving the second page so when you at the second page and scroll down the animation start then the page changed. - what is happening is when you scroll now the animation keep looping until the stop scrolling which is a bad user experience. – naz May 24 '21 at 03:11
  • See this answer: https://stackoverflow.com/a/36182162/1081396 – Alvaro May 24 '21 at 22:45

0 Answers0