Simple scrollproxy with Smooth-scrollbar horizontal scroll

[oligsap 10 Likes (Newbie)]

Hi,

 

I have a horizontal scroll using the Smooth-scrollbar library. I'm trying to do a simple rotation on a square by using GSAP ScrollTrigger's proxy but I can't get it to work.

 

What am I missing out here ?

 

As always thanks a lot for your help !

 

 

 

See the Pen VwjYZLw by olig (@olig) on CodePen

[akapowl 5,135 Likes (Superhero)]

 

Hey @oligsap

 

You are not giving ScrollTrigger any hint on the x-position-value to use, that you need for horizontal-scrolling.

 

ScrollTrigger.scrollerProxy(scrollbar, {
  scrollTop(value) {
    if (arguments.length) {
      myHorizontalScrollbar.scrollTop = value;
    }
    return myHorizontalScrollbar.scrollTop;
  },
  scrollLeft(value) {
    if (arguments.length) {
      myHorizontalScrollbar.scrollLeft = value;
    }
    return myHorizontalScrollbar.scrollLeft;
  }
});

 

 

I added the neccessary scrollLeft part to your scrollerProxy and it works.

In this scenario where you only just use horizontal scrolling you can probably also get rid off the scrollTop part in there.

 

 

See the Pen 46a9c4d053a15e2167e51a356b953255 by akapowl (@akapowl) on CodePen

 

 

 

[oligsap 10 Likes (Newbie)]

OMG !

 

You're right thank you very much !

[oligsap 10 Likes (Newbie)]

Hi @akapowl !

 

I'm trying to do the same thing now but with toggleClass. I've just modified the demo for buttons to toggle from red (not in viewport) to green (in viewport) but it doesn't work. What am I missing out here ?

 

See the Pen VwjYZLw by olig (@olig) on CodePen

 

Thanks a lot

[akapowl 5,135 Likes (Superhero)]

Hey @oligsap

 

You are setting up your ScrollTriggers before Smooth-Scrollbar is even initiated.

You need to set up your triggers after the initiation of smooth scrollbar - they wouldn't know what's going on otherwise.

 

 

1st: Init your smooth-scroll

2nd: Apply ScrollTrigger's scrollerProxy to tell it what to listen to

3rd: Set up your ScrollTriggers

 

I moved your ScrollTriggers for the button to the end of your JS and it works ( also  I added a start and end, so you can better see, that it works )

 

See the Pen 413181e6f4eef74becc39412364637a4 by akapowl (@akapowl) on CodePen