Multiple horizontal "scollers" in a single pinned element

[1amShaw]

Hello.
I was hoping you could help with the following issue.

 

I have a single element, that houses all of my modules. Unfortunately I cannot change this.

 

Inside of this module container element, I'd like to have two different elements (that are NOT taller than 100vh), that get pinned and scroll left... The first instance on the page works perfectly. however, the second instance happens way too soon. I can see that the markers are not where they should be.

 

Thank you in advance!

 

See the Pen QWmYdWM by 1amShaw (@1amShaw) on CodePen

[Cassie]

Heya! Thanks for the demo.

 

You'll need pinnedContainer for this as the calculations will be off for any scrollTriggers in side that container which are running after this one

See the Pen mdxvRXO?editors=1010 by GreenSock (@GreenSock) on CodePen

 

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

Alternately you can add some containing wrappers around the animated modules that include the ones before and after (so you don't end up with visual UI gaps) and pin those instead of the main container

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

 

Hope this helps!

 

[1amShaw]

Thank you so much for the fast reply.

 

I'm annoyed with myself because I tried using .pinnedContainer (after reading one of your replies the other day) but only applied it to the first one! 

 

Thanks for the other solution too. My issue with that is that the site I am working on allows the user to choose some preset background colours, which applies a class to the 'module'. Then I use those classes as adjacent sibling combinators, to alter spacing, key lines, etc...  (nightmare!), so wrapping them will cause issues with that.

 

But the first option works great! Thank you again! 

 

[Cassie]

Ah, you were almost there! Glad to help.