thirsty Posted January 12, 2022 Share Posted January 12, 2022 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 More sharing options...
Solution GreenSock Posted January 12, 2022 Solution Share Posted January 12, 2022 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? 4 Link to comment Share on other sites More sharing options...
thirsty Posted January 12, 2022 Author Share Posted January 12, 2022 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 12, 2022 Share Posted January 12, 2022 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! 1 Link to comment Share on other sites More sharing options...
thirsty Posted January 12, 2022 Author Share Posted January 12, 2022 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 ❤️ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now