Horizontal Scroll Trigger breaks Scope

[7samurai]

Hi,

first: very nice animation library, makes fun to work with.

 

But i struggle with following problem. I hav a brunch of elements on a single page, the become an animate of sliding, when in Scrollview (in codepen the .box). Works so fine. I also habe 3 sections of horizontal scrolling on the page, works also great. But all ".box" after the horizontal scroll dont work any more. 

What i am doing wrong? When i disable the horizontal Scroll, the box Animation works fine. 

See the Pen mdOYEjR by 7samurai (@7samurai) on CodePen

[akapowl]

Hey @7samurai

 

The problem at play here is that you are not creating the ScrollTriggers in the order that they appear on the page.

 

You are first looping through all boxes and creating triggers with information about their start- and end-points and then after that you are creating that pinning fake-horizontal-scroll ScrollTrigger that the boxes below that section for which you have already set up the ScrollTriggers can't accomodate for.

 

So in order to get this to work like you want, the easiest way would be to simply just call

 

 ScrollTrigger.sort()

 

after the creation of all your ScrollTriggers - which by default will sort the ScrollTriggers by their appearance on the page.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

This will lead to one thing you would have to consider on the side though in your example:

Since the first box right after your pinning section is sort of 'glued' to it (the way you have it positioned), the ScrollTrigger for that box will be triggered, when the horizontal-section gets pinned - because you didn't set a specific start to it and the default start for not-pinning ScrollTriggers is "top bottom".

 

You could simply poisition it differently via HTML or CSS or set a different start for the ScrollTriggers of your boxes to work around that.

 

See the Pen 7fd9561b91274408aac093577f753b67 by akapowl (@akapowl) on CodePen

 

 

Hope this helps - and welcome to the forums.

[7samurai]

Thank you @akapowl

First test on the production page looks good with the .sort function