Jump to content

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

Simple scrollproxy with Smooth-scrollbar horizontal scroll

Recommended Posts



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

Link to post
Share on other sites


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




  • Like 4
Link to post
Share on other sites

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

Link to post
Share on other sites

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


  • Like 3
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.