Simple scrollproxy with Smooth-scrollbar horizontal scroll

[oligsap 9 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 1,444 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 ExyaYBa by akapowl (@akapowl) on CodePen

 

 

 

[oligsap 9 Likes (Newbie)]

OMG !

 

You're right thank you very much !

[oligsap 9 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 1,444 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 bGedOoP by akapowl (@akapowl) on CodePen