Jump to content

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

Locomotive scroll + GSAP, randomly cut the page

Recommended Posts

Hi guys,

I'm trying to implement Locomotive smooth scroll and GSAP library to my website.
The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section.

I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help!


Here is the CSS and Javascript that I use in my project: 

See the Pen PopBXrm by stacies (@stacies) on CodePen

Link to comment
Share on other sites

Hello @Stacie , I think you should use


also you can check this topic :


  • Like 2
Link to comment
Share on other sites

Hi, @Ali Manuel! Thanks for such a quick reposnse.
Would you mind share a little bit more? 

Checked this topic but didn't find something that might help in my situation :(

Link to comment
Share on other sites


Hey there, Stacie.


After I cleaned up your provided codepen example, added some content  for it to be scrollable and what I suppose is what you want to do with what I suppose should be the navbar, I can not see any of the content being cut off at all.  


See the Pen eca0ae08daa38d69937e0f16a0b52f6d by akapowl (@akapowl) on CodePen


Would you mind adding a demo that shows your issue? It's hard to tell you anything on that when we can not see what is actually happening in your setup.


  • Like 5
Link to comment
Share on other sites

  • 2 months later...

Hello @akapowl Thanks for the pen above, any idea why the scroll event is not detected when the cursor is on the navbar "area" (setting the navbar height to 100px makes it easy to see).

Setting a lower z-index solves it in some way but navbar is not anymore on top of the main container.


Thanks for your help.

Edited by awazigh
additional details
Link to comment
Share on other sites


It's nothing related to ScrollTrigger at least - probably more to the way locomotive-scroll handles the scrolling.


I know that the same is the case with smooth-scrollbar, but they do have an option to avoid that behaviour.


Off the top of my head, the only way I would know how to go around that behaviour, would be to set pointer-events to none for the navbar and specifically set pointer-events to auto for every single element that you need to be accessible.


But that definitely feels more like a work-around to me.

Maybe try asking on locomotive-scroll's GitHub for a definitive answer - maybe they do have a similar option?


  • Like 3
Link to comment
Share on other sites

Thanks for the prompt reply, I'll check locomotive's GH comments maybe other users experienced this as well.

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.