Jump to content
GreenSock

thirsty

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

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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? 

  • Like 4
Link to comment
Share on other sites

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 :D

  • Like 1
Link to comment
Share on other sites

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 :D

You're welcome. Good luck with the project!

  • Like 1
Link to comment
Share on other sites

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 :D❤️ 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×