Problem: Skew scrolling + SmoothScrollbar.js

[CommonUser 1 Likes (Newbie)]

Hello again,

 

I've been using GSAP3' ScrollTrigger plugin for a little while now and managed to make the skew on scroll effect work, which I really enjoyed using. Although it does work perfectly with normal scrolling, I can't seem to make it work while using the SmoothScrollbar.js plugin (https://idiotwu.github.io/smooth-scrollbar/).

 

Please note to the Pen provided: when the SmoothScrollbar is removed, the skew on scroll effect works. 

 

I know GSAP and SmoothScrollbar are separate plugins so I'd understand if it just wouldn't work but I hope someone can find a solution.  

 

Sincerely,

 

Julius

See the Pen ZEWwdxN by enneking (@enneking) on CodePen

[akapowl 5,495 Likes (Superhero)]

Hey @CommonUser

 

That is because you have to define a scroller for each of your ScrollTriggers, when working in a setup as such.

 

I added

 

scroller: "#my-scrollbar",

 

to your ScrollTriggers, and also changed your scrollerProxy to

 

ScrollTrigger.scrollerProxy("#my-scrollbar", { ...

 

and now it works.

 

See the Pen 39472696135060952a1aa0860eecb919 by akapowl (@akapowl) on CodePen

 

 

[CommonUser 1 Likes (Newbie)]

@akapowl

 

Thank you for your help, that totally solved my problem