Share Posted October 8, 2020 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 Link to post Share on other sites
Share Posted October 8, 2020 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 4 Link to post Share on other sites
Author Share Posted October 8, 2020 OMG ! You're right thank you very much ! Link to post Share on other sites
Author Share Posted October 12, 2020 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
Share Posted October 12, 2020 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 3 Link to post Share on other sites