Problem with Pin

[Oleksandr07]

It is necessary to make that at scrolling of the page at one moment the animation of emergence of the image was started, and at another moment the image was fixed and changed during scrolling.
The problem is that when I scroll through the image gallery to the end, the block following the gallery overlaps the gallery.

See the Pen BawaWZN by Oleksandr07 (@Oleksandr07) on CodePen

[akapowl]

Welcome to the forums @Oleksandr07

 

Try adding a height/min-height to your .list, because if you don't, your .list will have a height of 0 and ScrollTrigger's pin-spacing will add up the scroll-duration to that, so you will 'end up short', the way you have things set up. Here is your example with a min-height of 50vh on the .list. Hope that helps.

 

See the Pen d53128e743726ed435fce5d937fb4900 by akapowl (@akapowl) on CodePen

 

Edit: ...just to give some idea for how to possibly handle things:

If you e.g. set the min-height to calc(300px + 10vh) matching a) the height of the images you use + b) 10vh with resemblance to the 10% distance to the top where your pinning begins, the scrolling will continue nicely when the whitespace above and below the image would be the same.

 

See the Pen c3ff56019123a6ad3dfd234801e0be3b by akapowl (@akapowl) on CodePen

 

[Oleksandr07]

Thanks, I think it will help