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