Scroll trigger pinned section with dynamic height based on inner content

[Nick Lewis]

Hi Everyone,

 

Long time GSAP dabbler, but first time posting in the forum. Looking for some help and advice.

I'm trying to create a scroll triggered and pinned section of a site that scrolls through content within a 'frame' inside the section. This is on desktop only. on mobile the animations are killed.
 

What I'm struggling with managing is the height of the container and how long it is pinned for before the content below naturally appears and the scroll continues as normal.

 

I have created an example of what I'm trying to achieve here.


I feel as thought I may be over complicating things, trying to set the height of the section dynamically based on the number of 'boxes' there are to scroll through. These 'boxes' will be dynamic, pulled from a CMS, so there could be 5 of them, could be 10+. Which is why I was trying to get the height and uses that to dynamically set things up.

Any help greatly appreciated! As I'm getting a little spun round in circles.

Additionally, improving performance would be amazing to know as well. As this is janky! But, that might be because it is trying to work out heights.

See the Pen RNWWMop by nickylew (@nickylew) on CodePen.

Edited July 17, 2025 by Nick Lewis
Adding mobile/desktop context

[Rodrigo]

Hi @Nick Lewis and welcome to the GSAP Forums!

 

Why not something like this, seems simpler IMHO:

See the Pen RNWWJOa by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Nick Lewis]

Hi Rodrigo!

Thank you very much for responding so quickly and with such a great solution.

I love how much simpler it is and how smooth it is as well.

 

I have tweaked it in a fork of the pen in order to keep a gradient at the bottom as well, so that the 'boxes' appear to be scrolling within an area with gradient top and bottom.

I have also simplified the GSAP even further, 😁 using CSS sticky for the left-hand title instead. As it occurred to me that this would work just as well for that part. It felt like I could control the position a little better and also get the title to stop being 'stuck in place' at the bottom of the container.

Here is an example.

 

See the Pen YPyybxo by nickylew (@nickylew) on CodePen.

Thanks again! Your solution helped me get to this point super quickly. What a great first experience in the forums.