Jump to content
Search Community

Locomotive scroll + GSAP, randomly cut the page

Stacie test
Moderator Tag

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

 

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

  • 2 months later...
On 6/9/2021 at 3:42 PM, Stacie said:

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: 

Yes, I have the same problem :(
Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?
https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL?

strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site


 

Link to comment
Share on other sites

32 minutes ago, GeS said:

Yes, I have the same problem :(
Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?
https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL?

strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site


 

I found the answer to my question, if you are interested read it
The problem is due to pictures that didn't show up in time
https://github.com/locomotivemtl/locomotive-scroll/issues/220

 

 

I loaded the imagesLoaded.js library and then put one line of code and almost everything works perfectly (it doesn't load literally 30 pixels of the image, but it no longer crops the site as much as it used to)

 

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

imagesLoaded('.root', { background: true }, function () {locoScroll.update();});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();

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.
×
×
  • Create New...