Start/End position problem

[Joelo]

Hi, I'm having a problem with the start and end positions. The scroll's start and end points are ok, but the objects I'm trying to animate have their start and end points appearing together, and they're also look to move to a higher position. I'm very new to this, so it's probably a combination of things. I've simplified my code as much as possible to replicate the problem on CodePen, also excuse me my english it's not the best. .

See the Pen vEKqgqz by joel-hern-ndez-garc-a (@joel-hern-ndez-garc-a) on CodePen.

[Rodrigo]

Hi @Joelo and welcome to the GSAP Forums!

 

I'm not 100% sure I understand the issue here, but perhaps you're looking for the clamp feature in the start/end points (click on the View More details link)

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#start

 

I forked your demo using that and some different values:

See the Pen jErjmPG by GreenSock (@GreenSock) on CodePen.

 

Another option could be using ScrollTrigger Batch:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Hopefully this helps

Happy Tweening!

[Joelo]

I managed to solve it. My problem was that I was trying to animate elements in a section of my website, but depending on the parent position. For one element, in this case an image, the start and end points were moving, as you can see in the previous Codepen (I modified my original Codepen to better explain what was happening). This was because I was adjusting the image with CSS cover, giving it different heights even after masking it, resulting in different start and end points.

 

The solution was to point to  the mask with trigger and then find the image to animate it. I've included another Codepen with the code that worked for me.

 

PD I couldn't figure out how to insert the new Codepen into the answer, so I'm leaving a link here XDI

 

See the Pen zxBVzZr?editors=0010 by joel-hern-ndez-garc-a (@joel-hern-ndez-garc-a) on CodePen.