Horizontal Scroll with Draggable, disabling and enabling animations on click

[17526_1494126625]

Hey guys, I have this horizontal scroll project I'm working through and I'm at the point where everything is working well, but, for open modals, we want to disable the scrolltrigger, and when the modal is closed, I want it to resume scrolling.  

 

I found another article about this using Scrolltrigger.disable(false) and Scrolltrigger.enable(false), but I'm noticing sometimes when closing the modals, the animation restarts all over again to the first slide.  

 

Am I missing something here?

See the Pen YzNJvYB by jdelatorre312 (@jdelatorre312) on CodePen

[GreenSock]

I didn't have time to read through all your code, but I noticed that when you "disable" the ScrollTrigger you're still allowing the user to actually scroll the page (the scrollbar is still there). That's going to lead to problems because they'll get totally out-of-sync. In other words, if you've got the scrollbar linked to the horizontal animation...but then you break that link temporarily and the user scrolls further down on the page, what would you expect to happen once they dismiss the modal? See the issue? You might want to hide the scrollbar or somehow prevent scrolling while the modal is open.

 

Also, this will cause problems in your CSS: 

scroll-behavior: smooth;

And to override the scrub animation (which would kick in when you re-enable), you can create an overwriting "progress" set() call as I show in this fork: 

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