ScrollTrigger spacing

[pylvin]

Hi all.To avoid indents at the bottom I made a couple of manipulations.I added "margin" for the "pin-spacer" element at "onUpdate" method "scrollTigger".But when scrolling it is noticeable how the whole section jumps.Everywhere examples where the "pin" element covers the whole screen,but there are no examples where the elements keep their positions and without any gaps. I just wanted the section with cards was pinned to the top of the screen until it does not scroll to the end horizontally and that the gaps at the bottom was not, as the screens are different and everywhere look different.As you already know "pinSpacing:false" does not help, as the sections are layered on top of each other, and I do not need it.I will be glad to any suggestions.

Pls check on full screen mode to better understand what i mean

See the Pen oNJvVgG by pylvin (@pylvin) on CodePen

[Rodrigo]

Hi @pylvin and welcome to the GreenSock forums!

 

The best approach in this cases is to wrap everything that you want to look pinned around an extra container, pin that container and use the horizontal smaller element to trigger the ScrollTrigger instance, like these examples:

See the Pen RwqNXbK by GreenSock (@GreenSock) on CodePen

 

See the Pen LYMYYEL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[pylvin]

Thanks for the answer @Rodrigo, it works.But I would like to know if there are other solutions, because throwing sections inside other sections is not a good idea in my case (Sections will be filled separately through CMS)

Any solutions even if it is a crutch and not the best practice does not matter

[Cassie]

I would still go this route. If they're coming through a CMS and you don't want to adjust the markup you could write some custom JS to wrap elements at the same point as you're adding the scrolltrigger code?

[pylvin]

Thanks for the answer @Cassie.Yes, I had to throw a section into another section via js and then initialize the ScrollTrigger.Thanks anyway😀