Variable height stacked pinning with combined lateral split sections

[dawesydev]

Hi there, pretty new to GSAP - loving it so far! ?

 

I am trying to combine these two examples,

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

 and

See the Pen NWMZrbj?editors=0010 by GreenSock (@GreenSock) on CodePen.

 to achieve an animation where the sections that vary in height are pinned, and where some sections with split content allow overflowing text to be scrolled into view. 

I've created a minimal demo here - I think the issue is that I'm trying to create nested ScrollTriggers and they're not playing well together / one is overriding the other.

 

Any help / advice on how to achieve this with GSAP would be great! Thanks.

See the Pen LYvLYLx?editors=0010 by dawesydev (@dawesydev) on CodePen.

[GreenSock]

You can't have nested pinning, but you could probably use position: sticky like this: 

See the Pen MWRoQoV?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Is that what you're looking for? 

[dawesydev]

Amazing, thanks - good to know

Quote

You can't have nested pinning

I solved the issue slightly differently where I only pinned the left side of the split content. However, I prefer this solution as it's less fussy!

 

Thanks again