ScrollTrigger pinned horizontal scroll end point

[kodralex]

I have a pinned horizontal scrolling section with panels of different widths. I'd like the pinned scrolling to finish (unpin) when the last panel (Part Six) is 32px from the left-hand edge of the view point. Is this possible?

 

I've reviewed all the documentation related to the ScrollTrigger end, and nothing is related to what I'm trying to do.

 

Thanks

See the Pen qBwMXOm by alexkodr (@alexkodr) on CodePen

[Cassie]

Hiya - you just need a little math adjustment here.

See the Pen mdgGBPN?editors=0011 by GreenSock (@GreenSock) on CodePen

Your 'getMaxWidth' fuction was adding the width of all of the sections in that row, but it wasn't accounting for any of the space between them.

 

Hope this new route helps.

[kodralex]

Thanks for replying and updating Cassie,

 

On your example the outer-wrap panel unpins once the 'part six' panel is 32px from the right edge of the viewport. Is it possible to change that to the left edge of the viewport? Like the attached image. So the last panel scrolls all the way from right to left and then the outer-wrap unpins.

[Cassie]

Yep!

 

You just need to work out how far you want it to move.  Just numbers. So that's the furthest point, minus the width of the last box and the offset amount.

 

I find sketching stuff down and drawing out the measurements I need helpful sometimes.

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

[kodralex]

Amazing.

 

Thank you, Cassie. What you said makes sense. I'll spend some time dissecting your JS to better understand how you actually did that.

 

Once again, thank you. The community behind GSAP is fantastic; it helps so much with learning.