Why isn't the end trigger going to bottom?

[IbraheemHaseeb]

So in the code you can see that I have added the end: "bottom bottom" such that the end trigger for the element goes to the bottom which in this case should be the bottom of the screen. But for some reason its not going there. Instead its struck to the bottom of the ".one" div container. Kindly help me out here what am I doing wrong.

 

Best Regards,

Ibraheem.

See the Pen YzNordw by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

[GreenSock]

I think it's just a misunderstanding on your part. You're pinning the main container until "bottom bottom" (when the bottom of that container would normally hit the bottom of the viewport, without any ScrollTrigger intervention). So let's say the viewport is 100px tall, and that container has 4 children that each are 100px tall, that means the container is 400px tall total, right? So it would take 300px worth of scrolling until its bottom hits the bottom of the viewport. 

 

It's not "stuck to the bottom of the ".one" container either - you told it to pin the container for that long, so as you're scrolling, you'd only see the .one element because it's inside the container that's pinned. In other words, it won't appear to scroll because it's pinned. And then when it becomes unpinned, things scroll as normal, thus you see the other child elements. 

 

As far as I can tell, everything is behaving as it should. 

 

If you're still having trouble, maybe it'd be best if you described exactly what you want to happen.

 

Also, a few notes:

1. I'd strongly recommend setting your transforms directly via GSAP. See 
2. Typically it's best to use xPercent/yPercent when dealing with percent-based translations so you can layer them on top of other units (more flexible). 
3. There's no reason to define the animation in a ScrollTrigger that's attached to a Timeline. It's redundant. And the way you were doing it is invalid - you were passing in a string of "tl" instead of an actual animation instance. 

I took a quick crack at making what I think you MIGHT have been looking for as a starting point: 

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

 

I just used a relative end value so that you can easily make it longer or shorter instead of basing things on where a certain element lines up in the viewport naturally. And I re-ordered the child elements just so their stacking order was correct, so you'd see the first element on top, then the other elements below. You could use z-index for that instead if you prefer. And I positioned the elements absolutely. There are several demos in the docs like this. Hopefully you've seen this page: https://greensock.com/st-demos

 

Good luck!

[IbraheemHaseeb]

6 hours ago, GreenSock said:

I think it's just a misunderstanding on your part. You're pinning the main container until "bottom bottom" (when the bottom of that container would normally hit the bottom of the viewport, without any ScrollTrigger intervention). So let's say the viewport is 100px tall, and that container has 4 children that each are 100px tall, that means the container is 400px tall total, right? So it would take 300px worth of scrolling until its bottom hits the bottom of the viewport. 

 

It's not "stuck to the bottom of the ".one" container either - you told it to pin the container for that long, so as you're scrolling, you'd only see the .one element because it's inside the container that's pinned. In other words, it won't appear to scroll because it's pinned. And then when it becomes unpinned, things scroll as normal, thus you see the other child elements. 

 

As far as I can tell, everything is behaving as it should. 

 

If you're still having trouble, maybe it'd be best if you described exactly what you want to happen.

 

Also, a few notes:

1. I'd strongly recommend setting your transforms directly via GSAP. See 
2. Typically it's best to use xPercent/yPercent when dealing with percent-based translations so you can layer them on top of other units (more flexible). 
3. There's no reason to define the animation in a ScrollTrigger that's attached to a Timeline. It's redundant. And the way you were doing it is invalid - you were passing in a string of "tl" instead of an actual animation instance. 

I took a quick crack at making what I think you MIGHT have been looking for as a starting point: 

 

 

 

I just used a relative end value so that you can easily make it longer or shorter instead of basing things on where a certain element lines up in the viewport naturally. And I re-ordered the child elements just so their stacking order was correct, so you'd see the first element on top, then the other elements below. You could use z-index for that instead if you prefer. And I positioned the elements absolutely. There are several demos in the docs like this. Hopefully you've seen this page: https://greensock.com/st-demos

 

Good luck!

Thank you so much for your time. ❤️