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(

Please help.

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

[Rodrigo]

Hi,

 

The problem here seems to be the element you're pinning more than anything else. I would recommend you to pin the farthest possible parent in order to avoid layout issues. Pinning is a tricky situation and when the element is pinned it creates some padding in order to accommodate the pin space required.

 

I forked your codepen and pinned the columnar elements instead of the element you were pinning:

See the Pen LYgeNeJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Solbeg]

@Rodrigo

This does not work for me, as I need to keep the horizontal scrolling height unchanged

That's why I fix the main section, to avoid that

[Rodrigo]

Hi,

 

I understand, but that is what actually causing the issues in your case. First always use markers when developing or debugging, if you do you would've seen the problem you have before posting the thread here in the forums:

In the image you can see that the start point of the second instance is before the end point of the first instance, which will pin an element that is already pinned. That's causing all the problems here.

 

This is the best I can come up with right now:

See the Pen LYgeNeJ by GreenSock (@GreenSock) on CodePen

 

Unfortunately we don't have the time resources to provide custom solutions to all our users. Maybe there is better and/or simpler way to do this, but hopefully is enough to help with your project.

Happy Tweening!