Jump to content
Search Community

Pin the aside section

clayteller test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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



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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@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 sectionI 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!

Screenshot 2023-09-14 at 6.12.36 PM.jpg


Link to comment
Share on other sites


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?


Link to comment
Share on other sites

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? 

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...