Search code examples
javascriptjquerygsap

JS: preventDefault for User Scrolling? Or force GSAP scrolling over user?

I'm working on a slideshow area. I want to make it so scrolling horizontally will trigger an animation which moves the scrollable area to the next "slide."

Everything is working, but only if I scroll just a tiny bit. If I scroll more, the GSAP scrolling animation fails silently.

There are two ways that would make sense for this to be solved which I can think of:

1 > The first would be cancelling the scroll behavior, something like this:

$viewing_area.scroll( function(event) {
   if(animationIsInProgress) {
       event.preventDefault();
   }
}

But this way is likely to stop GSAP scrolling as well. There is no way to distinguish if the scrolling is due to GSAP or the user that I know of.

2 > The second way would be to have GSAP force it's scrolling over anything the user is doing:

TweenLite.to($viewing_area, time, { 
    scrollTo: { x: slide_stops[nextTarget] }, 
    ease: Power4.easeInOut,
    onComplete: function() {
        console.log('scrolling completed');
        animationIsInProgress = false;
    }
    //Some option for forcing the behavior over user scrolling
});

Are either of these things achievable, or is scrolling by it's nature, unstoppable?

Solution

  • It ends up, GSAP scroll to plugin has a setting for this:

    http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

    It is called autokill, and if it is set to false, user scrolling will not interrupt the tween.

    TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});