Jump to content


Conflict between Scrolltrigger and regular tween

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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

Try adding wrapper around your element, and separate your animations.


You could also try adding overwrite: "auto" to your animation.

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.


  • Like 1
Link to comment
Share on other sites

  • Solution

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). 

  • Like 2
Link to comment
Share on other sites

@GreenSock thanks a lot for the explanation and the extra tips! Works like a charm!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.