Slow Automatic Horizontal Scrolling combined with ScrollTrigger

[scottib]

So I'm trying to create a slow automatic horizontal scrolling div combined with ScrollTrigger for when the user interacts with scroll. As you can see, for simplicity, I took a very simple existing demo and modified it.

 

The problem is pretty obvious. When the user interacts, it jumps all over the place because the automatic and scroll trigger are unaware of each others current points.

 

Ideally, I'd like it to slow scroll and then when the user scrolls, it can stop the auto scroll altogether but without the jump would be nice.

 

Thanks in advance to anyone who might point me in the right direction.

See the Pen GRqNZjv by philabama (@philabama) on CodePen

[ZachSaucier]

Hey scottib and welcome to the GreenSock forums. 

 

I see that you're using the old GSAP syntax some. We highly recommend using the GSAP 3 syntax as this guide covers.

 

In general I would recommend not creating conflicting tweens but rather animating the progress of the first tween, like this. However if you try this you'll see that there isn't any bugginess but it does jump once the user starts scrolling. This is because affecting the tween's progress doesn't actually update the scroll position of the page. So no go on that approach.

 

What you need to do instead is affect the actual scroll position of the page on scroll. I think the easiest way to do that is to use GSAP's ScrollToPlugin:

See the Pen ZEOBOYQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But you also need to watch out for other ways to scroll (keyboard commands, dragging the scrollbar) that I didn't build into the above demo. I also didn't handle resizing - to do that you probably want to kill off and recreate the auto tween with the new maxScroll value.

 

Let us know if you have additional questions. Happy tweening!

[scottib]

Thank you so much for the timely response. This should definitely get me started. Thanks again!