Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Horizontal scroll preventing skew on scroll effect?

Go to solution Solved by akapowl,

Recommended Posts

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

  • Like 1
Link to post
Share on other sites

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!


  • Like 5
  • Thanks 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.