Share Posted July 9, 2021 Hi there! I am trying to animate in an element with a regular `gsap.to()` tween and animate out the same element with a scrolltrigger. There seems to be some sort of conflict that I cannot resolve. I'm pretty sure it is some logic issue, but I cannot figure out what to do. The text should first be invisible, then fade in with the slight shift in the y position and then, when I start scrolling, it should slowly fade out again. The problem is, as soon as I add the ScrollTrigger, the Element will be visible from the very beginning, so it looks like the ScrollTrigger is setting the initial state of the element, when it shouldn't. Any idea what I am doing wrong and how to fix this? Thanks! See the Pen eYWzwvB by trych (@trych) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 9, 2021 Try adding wrapper around your element, and separate your animations. You could also try adding overwrite: "auto" to your animation. Quote overwrite If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false. 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted July 9, 2021 Yep, by default ScrollTrigger-based animations will render immediately so that they're prepped and ready to rock & roll the moment you get to the scroll position (performance). Plus there are a few other edge cases that helps work around. But you can simply set immediateRender: false on that tween if you don't want that to happen. See the Pen rNmMBZV?editors=0010 by GreenSock (@GreenSock) on CodePen Also, you don't need to set the trigger to "body" (that's the default) and the start can simply be 20 rather than "+=20px" (same thing in this case). 2 Link to comment Share on other sites More sharing options...
Author Share Posted July 9, 2021 @GreenSock thanks a lot for the explanation and the extra tips! Works like a charm! 2 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