Is it possible to do several horizontal scrolls in one pined section?

[Solbeg]

I have global script for horizontal sections and it works perfect

Horizontal slides are works inside pinned parent section

But when I have 2 and more horizontal scrolls in pinned section it crushes(

See the Pen ZEqagJY by AnnaShubskaya (@AnnaShubskaya) on CodePen

[mvaneijgen]

Hi @Solbeg, 

 

The issue is that the two pinned sections overlap and pin the same element. If you enable the makers you can see that the first end trigger is after the second start trigger which will cause this conflict. 

 

You either have to pin a different element and let the pin spacing created by ScrollTrigger handle the gap, or it will require a lot of custom code to handle this particular edge case. 

 

See the Pen xxmWNNV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[akapowl]

 

Hello @Solbeg

 

40 minutes ago, mvaneijgen said:

You either have to pin a different element and let the pin spacing created by ScrollTrigger handle the gap, or it will require a lot of custom code to handle this particular edge case. 

 

What Mitchel said actually isn't 100% true - ScrollTrigger does have a built in porperty to match cases like yours, where you are pinning the parent element of your trigger element multiple times - it's the pinnedContainer property. This is from the ScrollTrigger docs:
 

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. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)

 

That should fix your issue without a lot of custom code, but instead handled by ScrollTrigger internally (gotta thank GreenSock for that).

 

Does this work better for you?

See the Pen ExGEBpm by akapowl (@akapowl) on CodePen

 

[Solbeg]

@akapowl Big tnx to you! It works for me!!!!