Michael31 Posted February 2, 2021 Share Posted February 2, 2021 Hello, I gradually change the background color of my viewport when an element appears. I would like to gradually go back to the normal when this same element disappears from the viewport if you're keep scrolling. Is is possible to do so inside the same scrollTrigger object ? I tried to do the exit animation with another gsap.to() but it jumped. Thanks you very much See the Pen GRNJGYb by michaelgrc (@michaelgrc) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 2, 2021 Share Posted February 2, 2021 Hi @Michael31, You'll likely need another ScrollTrigger instance to tell GSAP when the section is leaving the viewport. Otherwise, you could set up your animation to scrub all the way to the end of your section, with this you'd want to shorten the duration of the initial bg-color animation and adding a blank tween to just finish the scrub, then run a 'back-to-normal' tween onLeave or onComplete 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 2, 2021 Share Posted February 2, 2021 Yeah, like elegantseagulls said there are multiple ways to set this up depending on your exact needs: Use two ScrollTriggers. Use one on a timeline and have blank space between your two tweens. Use one and put the animations inside of the callbacks. Use one and use toggleActions to play forward and reverse on either side. 3 Link to comment Share on other sites More sharing options...
Michael31 Posted February 3, 2021 Author Share Posted February 3, 2021 Thanks for your answers. I tried to combine the scrub and the toggleActions properties but I can't make it work. Does toggleActions can work when scrub is activated ? So I finally chose to use two ScrollTriggers. But eventually it jumps when the second transition plays : Does anyone see what I'm missing ? Link to comment Share on other sites More sharing options...
Solution akapowl Posted February 3, 2021 Solution Share Posted February 3, 2021 2 hours ago, Michael31 said: Does anyone see what I'm missing ? Hey @Michael31 You are actually making one of the most common ScrollTrigger mistakes by creating .to() logic issues. Setting an immediateRender: false like to be seen in the docs, fixes your issue. Cheers Edit: Quote I tried to combine the scrub and the toggleActions properties but I can't make it work. Does toggleActions can work when scrub is activated ? To also answer this question: No, they can not be combined. With toggleActions you tell ScrollTrigger how it should affect the playstate of the tween on enter/leave. But since you are using scrub, you are already doing this by telling it to be scrubbed along the ScrollTrigger's total distance. 2 Link to comment Share on other sites More sharing options...
Michael31 Posted February 3, 2021 Author Share Posted February 3, 2021 Hello @akapowl, thank you very much. Your explanations help a lot. 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