How do I get the user to finish the animation while scrolling.

[AndrewKhimich]

Hello all, help is needed... The problem is this. There is a block which needs to be animated and scroll the page to the next section. but the problem is that when the animation happens and the user continues to scroll it flickers. And if we scroll down and during the animation quickly scroll up it doesn't go back up and there is an empty space. I need to get the user to finish the animation and scroll to the next section

See the Pen dymezpY by andriy-khimich (@andriy-khimich) on CodePen

[GreenSock]

5 hours ago, AndrewKhimich said:

but the problem is that when the animation happens and the user continues to scroll it flickers. And if we scroll down and during the animation quickly scroll up it doesn't go back up and there is an empty space.

Are you saying that you want to FORCE the scrollTo animation and ignore any scrolling that the user tries to initiate during that process? I didn't notice any flickering but that's probably because I'm on a Mac and using my trackpad right now (traveling). I assume it's just because the tween is trying to animate the scroll to a certain position and then the user's mouse/drag is trying to interrupt and go somewhere else, creating a conflict. If so, you should probably disable scrolling completely during that time, like by listening for "wheel" events and calling .preventDefault(). 

 

Also, you don't need to ever use setTimeout() with GSAP - just use a delay:

// OLD
setTimeout(function () {
  gsap.to(window, { duration: 1, scrollTo: "#section4" });
}, 1500);

// NEW
gsap.to(window, { delay: 1.5, duration: 1, scrollTo: "#section4" });

 

[AndrewKhimich]

Thanks for your reply. I will definitely try that.  And yes, I need to disable any user activity when the animation is already running.