ScrollTrigger's Pin and Snap for Vertical Paneling

[HumbleB]

I'm very new to GSAP and I tried to follow a tutorial and some demos however I couldn't get the results I wanted. 

I wanted as the user scrolls down for '.container' to be pin when it hits the top of the screen. So I set start to "top top". And when the user scrolls to the '.container' for the first '.panel' to already be displayed. I believe that part is working as I wanted. 

When '.container' is pinned, as the user scrolls,  for each ".panel"  moves into view and snaps into place. I think this works correct. However, It's not working the way I want it to look. I want the text inside '.panel" to be displayed in the center of screen / '.container'. But the only way I could get this scroll effect to work was to make the height of '.container' greater than 100% like 600vh.  Oh and because I made it 600vh. There's extra whitespace at bottom. And I want to make sure everything is dynamic as possible. 

I also want it to snap to be more smooth or instant. There's a bounce there that I don't know what is causing it.

How can I fix these problems. Is there a better way for me to set up animations. 

See the Pen gOXoWRN by HumbleB (@HumbleB) on CodePen

[OSUblake]

Hi Humble,

 

The bounce is because you are using an old version of ScrollTrigger, 3.4. The latest version is 3.9.1, and does directional snapping so it will snap in the direction you are scrolling instead of the closest value. You can also change the speed and another options for snap. Please check out the snap section ScrollTrigger in the docs.

 

It looks you are trying to do this demo? Yours doesn't work the same because of your CSS, like having the panels inside a flex container.

 

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