bewards Posted October 15, 2021 Share Posted October 15, 2021 I am looking to use ScrollTrigger with the scrub option to control a GSAP timeline, but only updating the progress of the timeline/tweens when going forward in a position that has to be progressed. I did take a look at this post that says to use the onUpdate callback event to update the progress, but for some reason it's not working with how I set up the animation. When I scroll down half way through the animation and start scrolling back up, the progress reverses. From the codepen, I added gsap data-attribute options at the timeline and tween levels (timeline for the component, tween for the individual elements within the component so that I can provide different options, such as "position" to create the stagger effect). I've added the callback within the GSAP Timeline.scrollTrigger object. See the Pen rNzxOdz by bensewards (@bensewards) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 15, 2021 Solution Share Posted October 15, 2021 Welcome to the forums @bewards You would need to create a stand alone ScrollTrigger and control the progress like kind of like this. See the Pen porgyLX by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
bewards Posted October 18, 2021 Author Share Posted October 18, 2021 Thanks @OSUblake - exactly what I was looking for. I added a data-attribute to disable backwards scrubbing so now I can switch between the options. A lot to learn! Link to comment Share on other sites More sharing options...
bewards Posted August 24, 2022 Author Share Posted August 24, 2022 @OSUblake - has this changed since v3.8 (sep 2021 release)? I can see above that the 3rd card has it's style attribute value stripped upon timeline start and then works correctly once the progress of the card's tween is activated. Link to comment Share on other sites More sharing options...
GreenSock Posted August 24, 2022 Share Posted August 24, 2022 I'm looking into this, @bewards but likely won't have an answer until tomorrow. Please stand by... 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 31, 2022 Share Posted August 31, 2022 Sorry about the delay. I believe this is resolved in the upcoming release which you can preview at: Core: https://assets.codepen.io/16327/gsap-latest-beta.min.js ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 4, 2022 Share Posted September 4, 2022 3.11.1 has been released. 🎉 1 Link to comment Share on other sites More sharing options...
bewards Posted October 12, 2022 Author Share Posted October 12, 2022 Resolved! Thank you very much 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