Jump to content


locomotive scroll and gsap horizontal scroll problem ( Please help~~)

Recommended Posts

I have been taking almost a week to solve this problem by myself,  my problem is that if I add snap in scroller trigger variables, there is a pin spacing increasing and moving on the top, but the snap effect is working, since I really want this effect of compulsory snap scroll. If I remove snap variable everything is fine. I dont know how to use CodePen to show my code since I am using reactJs and I am the beginner of gsap and locomotive scroll, I want to make the website have the smooth behavior moving( locomotive scroll ) and gsap horizontal scroll at the same time.


I pushed my code onto Github, please whoever and take time to solve my confusion.
The related file are App.js,  App.scss, HorizontalScroll.jsx, useGsap.js, useLocoScroll.js , the rest of it please ignore:

See the Pen by Derek-Y1106 (@Derek-Y1106) on CodePen

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo and it isn't feasible to download your whole project and try to run it locally and provide free general troubleshooting for your whole codebase that involves 3rd party libraries like LocomotiveScroll. I'd strongly recommend switching to ScrollSmoother if you'd like support here (LocomotiveScroll is not a GreenSock product). 


My recommendation: see if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


The secret to good troubleshooting: isolate, isolate, isolate.


Here is a React starter template you can fork.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

locomotive scroll could detect the section and setting up pop-up animation, seriously quite cool

Link to comment
Share on other sites

ScrollSmoother cannot use I am not the club of gsap

Link to comment
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.