ScrollTrigger with end trigger is an other element

[Huy Nguyen 2K]

Hi, I have an issue with gsap scrollTrigger, I want trigger element is box1 and end trigger is child2 element, I also try with endTrigger property in scrollTrigger but it's not working. Is any solution for this problem. Thank you!

See the Pen YzREgQY by huynguyen235023 (@huynguyen235023) on CodePen

[GreenSock]

I'm struggling to understand what you're trying to do there. child2 is position: absolute and is at the very top from the beginning, so why would you want to use that as an endTrigger? And right now, you've got "end" being a relative value (starts with "+=") which makes it relative to the start, thus the "endTrigger" wouldn't even matter. 

 

Maybe it'd help if you explained exactly what you wanted to happen and what isn't working right now. 

[Huy Nguyen 2K]

56 minutes ago, GreenSock said:

I'm struggling to understand what you're trying to do there. child2 is position: absolute and is at the very top from the beginning, so why would you want to use that as an endTrigger? And right now, you've got "end" being a relative value (starts with "+=") which makes it relative to the start, thus the "endTrigger" wouldn't even matter. 

 

Maybe it'd help if you explained exactly what you wanted to happen and what isn't working right now. 

Because in my case, I want when end scrollTrigger animation of box1, box2 must be next to child2 but currently it is overwrite each other.

[GreenSock]

3 hours ago, Huy Nguyen 2K said:

Because in my case, I want when end scrollTrigger animation of box1, box2 must be next to child2 but currently it is overwrite each other.

I read that 5 times and I'm still completely lost, sorry. I don't understand what you're trying to do. child2 takes up the whole screen, so how could it be next to child1?  And what do you mean about overwriting? 

[Huy Nguyen 2K]

4 hours ago, GreenSock said:

I read that 5 times and I'm still completely lost, sorry. I don't understand what you're trying to do. child2 takes up the whole screen, so how could it be next to child1?  And what do you mean about overwriting? 

Sorry because I'm not explain clearly, I want to run animation in box1 with scrollTrigger but I have a problem when use pin with scrollTrigger, it's create pin spacer element to embrace box1 and you can see in box1 there are two elements child1 and child2 but child2 larger than it's parent. Is any way to pin spacer element also embrace child2 element?

[GreenSock]

If you want to pin the container, then just define that as the pin: 

pin: ".box1"