Big unnecessary spacing in ScrollTrigger

[mCat006]

Hello Community,

I'm starting my adventure with ScrollTrigger. Generally I want to copy effect from  http://markup.io

here is my CodeSandbox https://codesandbox.io/s/gsap-demo-7e6hl?file=/src/components/Carousel/Carousel.js

 

On bottom of every section is generated big unnecessary spacing. Images will be with different height and they always will be from center to the right edge of the screen. I would be grateful for any suggestions on how to fix and improve this.

 

Thanks!

 

[GreenSock]

Welcome to the forums, @Mateusz K.! I'm not entirely sure what you're looking for there but it sounds like maybe you just need to set pinSpacing: false. Does that help? 

 

By default, ScrollTrigger will add padding to the bottom of your pinned element in order to push other things down on the page for the duration of the pin so they "catch up" exactly when it become unpinned. But you can easily disable that by setting pinSpacing: false. Hopefully the docs help make it clear too. 

 

Happy tweening!

[mCat006]

Hello, it helps. Also adding height for element in css helps too.

 

Thanks a lot!