Horizontal scroll preventing skew on scroll effect?

[codenub]

Hello there,

I'm a total noobie here.

I've recently started practicing webdev, and wanted to create a portion of my website to scroll horizontally while some elements throughout the website has skewing effect on scroll.

But the problem is any elements that are BELOW the horizontal scrolling section, skewing effect is not kicking in.

Why is it doing so??

See the Pen ZEeMVMx by jjchung13 (@jjchung13) on CodePen

[akapowl]

Hey @codenub

 

You can not have multiple elements in your markup with the same ID - so you might want to consider giving the elements you want to skew on scroll a specific class instead and target that class in your JS instead of an ID ( as it also is the case in the demo where you likely got the code for this ).

 

Then you will still have the problem that there is a pinning section in between that can not be accommodated for since in your JS you are creating the horizontal-fake-scrolling ScrollTrigger after your skewing-ScrollTriggers. So you would either have to change the order of creation - or you could just add a refreshPriority: -1 to the skewing-ScrollTrigger to make sure it will get considered later than the other ScrollTrigger and thus can accomodate for the pin-spacing. 

 

Happy scrolling  

 

...oh, and welcome to the Forums!