Horizontal Scrolling with pinning question

[dev-dr-mustin]

Hi There,

 

I'm new-ish to GSAP but have been able to have some success with prior projects which were a bit more elementary and straight forward.

 

I am trying to implement functionality as seen in the demo titled 'Fake Horizontal Gallery Transition' here: https://greensock.com/st-demos/?d=19

It's obviously a great starting point but I am having little to no success modifying the line:
 

const [x, xEnd] = (index % 2) ? ['80%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];

I am wondering if there is a way to stop each .wrapper div before it horizontally scrolls across the whole viewport/screen. In my case, I would like to stop the odd numbered wrappers on the right side of my 1200px grid and the even numbers wrapper divs on the left side of my grid.

 

Any help would be appreciated as I'm not sure this is common functionality users are seeking. I'll keep plugging away until then. 

 

I've attached a screen capture below to hopefully illustrate more clearly than my words can.

 

 

 

See the Pen BaogqYy by noeldelgado (@noeldelgado) on CodePen

[Rodrigo]

Hi,

 

That is exactly where each horizontal section is actually stopping, the problem could be the fact that, since ScrollTrigger is using the default start and end points you're not able to see it. Those points are "top bottom" for the start (top of the trigger/bottom of the viewport) and "bottom top" for the end (bottom of the trigger/top of the viewport).

 

This fork shows how it works with modified start/end points:

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

 

Hopefully this clear things up.

Happy Tweening!

[dev-dr-mustin]

Hey @Rodrigo,

 

Thanks for the help.

 

I think I've figured it out now.

 

Cheers.

[Rodrigo]

Hey,

 

Is great to hear that, thanks for reporting back!

 

Happy Tweening!