bntratox Posted December 27, 2022 Share Posted December 27, 2022 Hello, Im trying to learn GSAP, right now I am able to move objects with gsap.to and scrolltrigger. But I didn't understand how can I animate things based on scroll amount. For example: This is my codepen and a simple example. When a sections top hits the top of the screen it just animates immediately. What I want is, I want to animate not to happen immediately but based on scroll amount. For example I set xPercent to move 30% when top hits top, but I want the object move 15% when I scroll a little bit, and when I keep scrolling it moves %20 %25 %30 etc... and so on. How can I do that? Thank you. See the Pen yLqeNpW by mertcanuslu (@mertcanuslu) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted December 27, 2022 Solution Share Posted December 27, 2022 Hello @bntratox, scrub is what you are looking for instead of toggleActions From the docs: Quote ScrollTriggers can perform [...] actions on an animation (play, pause, resume, restart, reverse, complete, reset) when entering/leaving the defined area or link it directly to the scrollbar so that it acts like a scrubber (scrub: true). Quote scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. So when you set scrub to true on a ScrollTrigger, it will stretch out the entire linked animation between the ScrollTrigger's start and end, and thus advance the progress of the linked animation with the scroll-position in between those points on the page. This section here explains in a bit more detail how that interacts with durations of tweens, which will be helpful to know when you e.g. want to wok with timelines: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub Some little sidenotes: markers belong inside the ScrollTrigger object, not on the tween For ScrollTriggers there is no stagger setting - this would belong on your tweens - but since you are using a forEach loop, stagger actually wouldn't make much sense anyway because you will always be targetting a single element When using booleans (true/false) as 'values', they do not go in quotation marks, and... ... stagger does not accept booleans to begin with. You'll find more information on how to use stagger here:https://greensock.com/docs/v3/Staggers See the Pen wvxMKKZ by akapowl (@akapowl) on CodePen As you can see, with scrub the animation will only advance in one direction though. So if you want to reverse it later on while scrolling in the same direction, you have different options. In your case, a repeat on the tween with yoyo and repeatDelay could work: See the Pen abjdvdW by akapowl (@akapowl) on CodePen Alternatively you could set up one more scroll-triggered tween to 'reverse' things later on with the start and end of the ScrollTriggers set as needed - in this case you would also need to set immediateRender to false on the latter ScrollTrigger though, because otherwise you'd run into some slight logic issues. See the Pen poZgjyJ by akapowl (@akapowl) on CodePen Or last, but very much not least, use a timeline and position your tweens on there appropriately by e.g. making use of the position parameter. See the Pen WNKrQGe by akapowl (@akapowl) on CodePen I hope this will clear things up a bit - altough it's a lot to take in. Especially the use of scrub with timelines, the concept of how drations work with scrubbed ScrollTriggers and the use of the position parameter on top of it, can be sort of hard to wrap around. But once you get the hang of it, you'll feel your animation superpowers go to over 9000! It just needs some getting used to - and a bit of practice. Happy scrolling! One thing I missed: By default, gsap will set an ease of 'power1.out' to every tween, so if you want any scrubbed tween's progress to advance absolutely in sync with the scroll-progress, you will need to specifically set ease: 'none' on that tween. 2 1 Link to comment Share on other sites More sharing options...
bntratox Posted December 27, 2022 Author Share Posted December 27, 2022 1 minute ago, akapowl said: Hello @bntratox, scrub is what you are looking for instead of toggleActions From the docs: So when you set scrub to true on a ScrollTrigger, it will stretch out the entire linked animation between the ScrollTrigger's start and end, and thus advance the progress of the linked animation with the scroll-position in between those points on the page. This section here explains in a bit more detail how that interacts with durations of tweens, which will be helpful to know when you e.g. want to wok with timelines: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub Some little sidenotes: markers belong inside the ScrollTrigger object, not on the tween For ScrollTriggers there is no stagger setting - this would belong on your tweens - but since you are using a forEach loop, stagger actually wouldn't make much sense anyway because you will always be targetting a single element When using booleans (true/false) as 'values', they do not go in quotation marks, and... ... stagger does not accept booleans to begin with. You'll find more information on how to use stagger here:https://greensock.com/docs/v3/Staggers As you can see, with scrub the animation will only advance in one direction though. So if you want to reverse it later on while scrolling in the same direction, you have different options. In your case, a repeat on the tween with yoyo and repeatDelay could work: Alternatively you could set up one more scroll-triggered tween to 'reverse' things later on with the start and end of the ScrollTriggers set as needed - in this case you would also need to set immediateRender to false on the latter ScrollTrigger though, because otherwise you'd run into some slight logic issues. Or last, but very much not least, use a timeline and position your tweens on there appropriately by e.g. making use of the position parameter. I hope this will clear things up a bit - altough it's a lot to take in. Especially the use of scrub with timelines, the concept of how drations work with scrubbed ScrollTriggers and the use of the position parameter on top of it, can be sort of hard to wrap around. But once you get the hang of it, you'll feel your animation superpowers go to over 9000! It just needs some getting used to - and a bit of practice. Happy scrolling! Thank you so much for this detailed and explaining comment, I will keep in mind everything here. 👌 3 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