gsap Slide elements back to right side position in horizontal scroll.

[Roman098765]

Hi, I started using GSAP recently and I like this library but I stuck for now. I want to slide elements back to right side position after having already scrolled to the next vertical section. The idea is that there is no empty space left after horizontal scroll ends. I can use this approach to prevent it: 
x: () =>
        -(container.scrollWidth - document.documentElement.clientWidth) + "px"
but this is not exactly what I want, because if there are not many elements and they fit into the screen, it will just stand there until I scroll to the next section.

Thanks for your help 🙏.

See the Pen mdzBejp by roman1253361234 (@roman1253361234) on CodePen

[GreenSock]

I'm not sure I understand your goal completely, but I assume you want to only move things horizontally when there are enough items to overflow (so you can reveal all of them), right? And I also imagine you'd want to avoid the empty white space below each pinned section. You can do that by wrapping everything in a container <div> and pinning that. Here's my guess at what you were going for: 

 

See the Pen PoyJpMY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that gets you moving in a good direction. Enjoy!

[Roman098765]

10 hours ago, GreenSock said:

I'm not sure I understand your goal completely, but I assume you want to only move things horizontally when there are enough items to overflow (so you can reveal all of them), right? And I also imagine you'd want to avoid the empty white space below each pinned section. You can do that by wrapping everything in a container <div> and pinning that. Here's my guess at what you were going for: 

 

 

 

 

I hope that gets you moving in a good direction. Enjoy!

It solves this problem in different way, but it's fine, thank you!