Pin the aside section

[clayteller]

Hello GSAP gurus, can you help me with what is surely a simple animation?

 

I'm trying to pin my aside section during scroll: Start pinning when aside section hits the top of the viewport and stop pinning when the bottom of the aside section hits the bottom of the main section.

 

It is close to working like I want, but I have a small issue: It appears that once the pin is triggered there is extra space created at the bottom of my main section. The extra space seems to be equal to the height of my aside section.

 

Any idea what I'm doing wrong here? I just don't want that extra space to be there.

 

Thanks so much!

See the Pen GRPEdBP by clayteller (@clayteller) on CodePen

[mvaneijgen]

pinSpacing: false is what you're looking for. From the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Quote

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.  

 

I've also subtracted the height of the .aside container from the end trigger, so that it perfectly lines up. Hope it helps and happy tweening! 

 

See the Pen XWoadYq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[clayteller]

Thanks @mvaneijgen I really appreciate it! I even read about pinSpacing—don't know why I didn't connect the dots. GSAP community is the best.

[clayteller]

@mvaneijgen I implemented your code update and it works great, thanks!

The real application of this will sometimes have an aside section that is taller than the main central section. I set this up in my pen, and although it's minor, the aside section slightly extends below the bottom after scrolling (attached screenshot).

 

Hmm, any idea how I can prevent this? If it's not an obvious fix, no worries, I'm sure I can fudge it somehow. Thanks!

 

[mvaneijgen]

A fix would be to check if the section is taller then the content and then switch pinSpacing: true or don't create the ScrollTrigger at all, because then it is not needed right? 

[Rodrigo]

Hi,

 

@mvaneijgen is right check the height of the section and use the logic in this example:

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

 

Hopefully this helps.

Happy Tweening!

[clayteller]

@mvaneijgen that makes sense, thanks! You're right, but my script will run on a site that will have pages created by my client in the future. Performing a height check sounds like a great solution for my case. 👍

 

@Rodrigo thanks for the example!

[MichaelNotJacksonOrJordan]

Hi,

I'm a total noob so I've been inspecting Rodrigo's solution to try to understand the concepts as I would like to come up with something similar but there is one thing I need help with. Using a constant end point results in the perceived scroll speed changing with varying height of the content being animated as you can see

See the Pen KKbZBbm by MichaelCodePencil (@MichaelCodePencil) on CodePen

 which is a copy of Rodrigo's only with varying content in each div.large-child. I failed to come up with a solution trying eg...

end: () => `+=${large.clientHeight / 5}`

or something to that effect. 
Any ideas on how to have a consistent scroll speed with varying amounts of content in the animated elements?

Thanks!

[GreenSock]

Are you trying to accomplish something like this?: 

See the Pen xxmpQwP?editors=1010 by GreenSock (@GreenSock) on CodePen

[MichaelNotJacksonOrJordan]

Sonofagun. Works great. Now I have to figure out why haha. Thanks! 

[GreenSock]

This is the key: 

end: () => "+=" + (large.offsetHeight - window.innerHeight),

That makes the pinning distance correspond to the overflow/height of the content. More content would mean a bigger number there, so it stays pinned longer. And I added conditional logic to skip the whole thing if the content is too short (no overflow). 

 

Does that clear things up? 

[MichaelNotJacksonOrJordan]

Hi Jack,
 

Yes. Thanks so much.