Jump to content
Search Community

ScrollTrigger spacing

pylvin test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...