Incorrect trigger positions when using two or more ScrollTrigger

[PavelD]

I have two identical sections and two ScrollTriggers for them. The animation of the first section works as it should, but the animation of the second section is too fast. As you can see from the markers, the second section has the wrong end trigger. How can this be fixed? Thank you

See the Pen QWVKMrO by UnluckySerivelha (@UnluckySerivelha) on CodePen

[GreenSock]

Welcome to the forums, @PavelD! And thanks for putting together such a great minimal demo. Those are super helpful. 

 

The problem is that you're passing a numeric value as the "end" for your ScrollTrigger, and numbers are interpreted as the raw (absolute) scroll position but I think you meant to use a relative value. For example...

// when the page has scrolled exactly 500px (absolute, like from the very top):
end: 500

// when the page has scrolled 500px beyond wherever the start of this ScrollTrigger is (relative):
end: "+=500"

Is this what you intended?:

See the Pen ExegbjW?editors=1010 by GreenSock (@GreenSock) on CodePen

[PavelD]

4 hours ago, GreenSock said:

Welcome to the forums, @PavelD! And thanks for putting together such a great minimal demo. Those are super helpful. 

 

The problem is that you're passing a numeric value as the "end" for your ScrollTrigger, and numbers are interpreted as the raw (absolute) scroll position but I think you meant to use a relative value. For example...

// when the page has scrolled exactly 500px (absolute, like from the very top):
end: 500

// when the page has scrolled 500px beyond wherever the start of this ScrollTrigger is (relative):
end: "+=500"

Is this what you intended?:

 

 

This is exactly what i wanted. Thank you very much!