Can you modify the Scrub value of a scrollTrigger in real time?

[thirsty 1 Likes (Newbie)]

I have been working on a homepage redesign for a company, and they want the scroll animation to work via A, scrolling, B, dragging, and C, clicking on arrow buttons on mobile.

For A it was easy enough to do a ScrollTrigger timeline, for B I implemented Draggable and did an onDrag scrollTrigger.scroll() call, but for C, I want to slow down the scroll speed, since I'm calling scrollTrigger.scroll(someScrollAmount),

It seems there is an ideal scrub value for each use case, so I would love to be able to set scrollTrigger.vars.scrub, and have it change the scrub value for when I call scrollTrigger.scroll() manually.

I've made a small reproduction here with big UP and DOWN buttons

See the Pen oNGQbOB by lopupen (@lopupen) on CodePen

[GreenSock 18,566 Likes (Superhero)]

No, you can't alter the scrub value, but you could get a similar effect by simply tweening the scroll position to make things longer.

 

Candid admission: usually we don't do "build-to-order" things in these forums, but I got curious and love a challenge, so as a courtesy I whipped together an example and even made the page draggable: 

 

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

 

Notice the buttons create a tween of the scroll position and they take 2 seconds to complete. Obviously you can tweak that to whatever you want. 

 

Does that help? 

[thirsty 1 Likes (Newbie)]

12 minutes ago, GreenSock said:

No, you can't alter the scrub value, but you could get a similar effect by simply tweening the scroll position to make things longer.

 

Candid admission: usually we don't do "build-to-order" things in these forums, but I got curious and love a challenge, so as a courtesy I whipped together an example and even made the page draggable: 

 

 

 

 

Notice the buttons create a tween of the scroll position and they take 2 seconds to complete. Obviously you can tweak that to whatever you want. 

 

Does that help? 

Did you really just roll your own Draggable implementation? Impressive

It does help, although I was hoping to be able to modify the scrub value so I could change the dragging behaviour compared to scroll behaviour, now I'm thinking I'll try this custom tween solution for getting a different drag behaviour too?

ps. had no idea you could target a scrollTrigger with gsap.to ?! that's wild

thanks so much for the reply you went above and beyond, gonna help a ton

[GreenSock 18,566 Likes (Superhero)]

2 minutes ago, thirsty said:

Did you really just roll your own Draggable implementation? Impressive

Yep. I've got a little experience with that kind of thing 

 

It was an excuse to try to make one that's as bare-bones as possible. I tend to geek out over that kind of thing. 🤔

 

4 minutes ago, thirsty said:

I was hoping to be able to modify the scrub value so I could change the dragging behaviour compared to scroll behaviour, now I'm thinking I'll try this custom tween solution for getting a different drag behaviour too?

Yep, you could totally implement a tween for the dragging instead of a direct setting of the scroll position. And then give it whatever duration you want (just remember overwrite: true so you're not creating lots of conflicting tweens). 

 

So yeah, you could set your scrub value to whatever the shortest one should be (dragging/buttons/scrolling) and then for the ones that you want to take longer, simply tween them accordingly with whatever duration you want. 

 

6 minutes ago, thirsty said:

ps. had no idea you could target a scrollTrigger with gsap.to ?! that's wild

Fun, right? GSAP handles getter/setter methods which can be super useful. Once you learn that you can use one tween to animate the progress or timeScale of another tween...it's kinda mind-blowing. 🤯

 

7 minutes ago, thirsty said:

thanks so much for the reply you went above and beyond, gonna help a ton

You're welcome. Good luck with the project!

[thirsty 1 Likes (Newbie)]

2 minutes ago, GreenSock said:

Yep. I've got a little experience with that kind of thing 

 

It was an excuse to try to make one that's as bare-bones as possible. I tend to geek out over that kind of thing. 🤔

 

Yep, you could totally implement a tween for the dragging instead of a direct setting of the scroll position. And then give it whatever duration you want (just remember overwrite: true so you're not creating lots of conflicting tweens). 

 

So yeah, you could set your scrub value to whatever the shortest one should be (dragging/buttons/scrolling) and then for the ones that you want to take longer, simply tween them accordingly with whatever duration you want. 

 

Fun, right? GSAP handles getter/setter methods which can be super useful. Once you learn that you can use one tween to animate the progress or timeScale of another tween...it's kinda mind-blowing. 🤯

 

You're welcome. Good luck with the project!

Awesomeeeeeeeeeeee and thank you again ❤️