SteveS Posted May 18, 2022 Share Posted May 18, 2022 I'm animating a section such that when it comes to the middle of the screen, it is full opacity for a small distance and then it fades back to its original opacity. I am achieving the effect with the following code: const anim = gsap.to(containerRef.current, { opacity: 1, scrollTrigger: { trigger: containerRef.current, start: "top center", end: "25% center", scrub: true } }) const anim2 = gsap.to(containerRef.current, { opacity: 0.2, scrollTrigger: { trigger: containerRef.current, start: "75% center", end: "bottom center", scrub: true } }) I'm just curious if this is an okay way of achieving the effect. Is there a more performant method? Link to comment Share on other sites More sharing options...
PointC Posted May 18, 2022 Share Posted May 18, 2022 You can do it like that or you could use a yoyo tween. Something like this should work: const anim = gsap.to(containerRef.current, { opacity: 1, ease: "none", yoyo: true, repeat: 1, repeatDelay: 2, scrollTrigger: { trigger: containerRef.current, start: "top center", end: "bottom center", scrub: true } }); Happy tweening. 2 Link to comment Share on other sites More sharing options...
SteveS Posted May 18, 2022 Author Share Posted May 18, 2022 Thanks for the reply, it pretty much answers my question, but introduced a few more: In my original way of doing it, is there a performance hit for creating multiple scrollTriggers, or do all scrollTrigger animations propagate to a single scrollTrigger? Say I had twenty, fifty, or even on hundred elements. Is it creating a new scrollTrigger for each one? In my method I am able to have a brief period of scroll where the animation doesn't change, with the yoyo method (which I prefer since it decreases the number of tweens) is it possible to get the same effect? Link to comment Share on other sites More sharing options...
Solution PointC Posted May 18, 2022 Solution Share Posted May 18, 2022 I don't think there's anything wrong with the way you did it and a few extra ScrollTriggers aren't going to make a noticeable difference. Jack is a performance connoisseur so I trust GSAP and don't get too wrapped up in all things performance until I notice something chugging along. That's almost always going to be a rendering issue though. The yoyo tween I posted above will have a brief period of time with nothing changing. That's why there is a repeat delay. Say you have the above code with a 1 second tween duration and a 2 second repeat delay. That's a total of 4 seconds. So, the first 25% of the scrub will be the tween to full opacity. 25% → 75% of the scrub is nothing as that is the delay. Then 75% → 100% would be the fade back to the original opacity. Make sense? Happy tweening. 2 Link to comment Share on other sites More sharing options...
SteveS Posted May 18, 2022 Author Share Posted May 18, 2022 Ok, so duration on a tween that is attached to a scrollTrigger using scrub will always take up the entirety of the scroll distance. i.e. putting a duration of 10 seconds will not change the tween progress versus a duration of 4 seconds. My last question here is: is there a way to manually control the tween progress during a scrub? For example, the effect of the previously discussed tween can be described by a function with the chart Where the function accepts values between 0 and 1 as the progress of the tween (duration or scrub progress) , and returns a % value of the animation (animation progress). Is it possible to get the with custom eases or otherwise? Syntactically I find it appealing to work in this way. Link to comment Share on other sites More sharing options...
PointC Posted May 18, 2022 Share Posted May 18, 2022 Correct - the duration of a tween doesn't make much difference with scrub. It's all about ratios. Two 1 second tweens on a scrub timeline will be the same as two 10 second tweens on a timeline. (Each taking up 50% of the scroll distance) However, changing just one of them to 10 seconds will make a big difference. Now, the 1 second tween is only taking up approximately 9% of the scroll distance while the 10 second one is take up approximately 91% because we have a total of 11 seconds. My personal preference is to use linear eases on scrub tweens/timelines, but yes you can certainly use a custom ease on a scrub tween if that's your preference. I'd say just give it a try and see what what works. Happy tweening. 3 Link to comment Share on other sites More sharing options...
SteveS Posted May 18, 2022 Author Share Posted May 18, 2022 Awesome, thanks for all the information! 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