Stanimish Posted November 5, 2020 Share Posted November 5, 2020 Hello! Didn't find the hints here. How can I make the path draw with the help of DrawSVGPlugin and Scrolltrigger. But to make it be drawn only on scroll down and to leave what is already drawn on scroll up? I played with one of the demos on codepen using onUpdate method and self.direction but didn't succeed. See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted November 5, 2020 Solution Share Posted November 5, 2020 Hey Stanimish. The trick to this is to create your animation separate from the ScrollTrigger, make sure it's paused, then use ScrollTrigger's onUpdate to change the progress if the new progress is greater than the old one. Applied to the linked demo: See the Pen abZjjNr?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Stanimish Posted December 7, 2020 Author Share Posted December 7, 2020 Thank you, Zach! Works great Link to comment Share on other sites More sharing options...
maettuu Posted August 6, 2021 Share Posted August 6, 2021 @ZachSaucier hey there :) your post is very helpful - I'm trying to create something similar but using scrub with a number. I've tried this method using the onUpdate property, but unfortunately it doesn't seem to work for scrub with a number - it simply updates like scrub were set to true. Is there any workaround to get this one way scrub but with a number? thx for a reply :D Link to comment Share on other sites More sharing options...
mikel Posted August 6, 2021 Share Posted August 6, 2021 Hey @maettuu, Welcome to the GreenSock Forum. Just do it without onUpdate. See the Pen JjNmpKb by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
maettuu Posted August 6, 2021 Share Posted August 6, 2021 Hey @mikel Thank you for the quick reply and the demo. This would work just fine, but I'm looking for a solution where the scrub only applies whenever I scroll down like in the first example. My question is if I can somehow still apply the delay of the scrub to catch up when you define it with a number rather than just set it to true. So I still need the onUpdate but need it to catch up to the furthest scrolled position in like 3 seconds (similar to scrub: 3 but only whenever I scroll down). Does this make sense? Link to comment Share on other sites More sharing options...
mikel Posted August 6, 2021 Share Posted August 6, 2021 Hey @maettuu, You could use the option once:true // an option Happy scrolling ... Mikel 1 Link to comment Share on other sites More sharing options...
maettuu Posted August 6, 2021 Share Posted August 6, 2021 @mikel yes thank you, also a very nice option 🙂 but unfortunately again not what I'm looking for - once:true will only deactivate the animation from reversing once I completely scrolled to its end once. However, if I scroll back up in the middle of the animation it still reverses. I take it there is no option to make this work then? 😕 Link to comment Share on other sites More sharing options...
OSUblake Posted August 6, 2021 Share Posted August 6, 2021 You can animate the progress of a timeline. onUpdate({ progress }) { // add this if you want it to stop it when scrolling up // gsap.killTweensOf(tl); if (tl.progress() < progress) { gsap.to(tl, { progress: progress, duration: 3, overwrite: true }); } } 2 1 Link to comment Share on other sites More sharing options...
maettuu Posted August 9, 2021 Share Posted August 9, 2021 @OSUblake oh wow that is smart, didn't know this was possible - thx for the response! I will try it out 😀 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 9, 2021 Share Posted August 9, 2021 2 minutes ago, maettuu said: oh wow that is smart, didn't know this was possible That's all the scrub feature does under the hood. The number you pass in is just the duration. 😉 1 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