Streaming live at 10am (PST)

Locomotive scroll js issues


Has somebody implemented this library successfully into their builds without any issues?

I was following this great tutorial by @timothy1643

  1. My page has been cut on the bottom (you can not see footer) after implementing this library. Someone within YT comments mentioned issue with wrong body calculations. Maybe it is somehow related to this issue.

Anyway, It looks that it do wrong body calculations. I didn’t work with this library in code editor (custom test website) this mean I do not know if it is WF issue or library it self. After switching from page back to home (where I have applied this library) I have always got a different body size, no mother I have done last section (any last section) was cut off.

  1. When clicking on the anchor link (homepage), locomotive somehow hides the whole content (you get the blank page). When using URL, everything works fine.

  2. As @timothy1643 mentioned in the YouTube comments, this library does not work with WebFlow scroll interactions. I have set “appear/hide” effect on my navbar. In case I stick with this library, how can I somehow make this effect work again? Maybe utilising Headroom JS or something similar?

Hey Alex, I’m sorry it’s giving you issues. This all sounds like normal locomotive behavior. Like mentioned in the tutorial, locomotive isn’t compatible with WebFlow scroll interactions because it removes all page scrolling and just adds a css transform of move to the page wrapper so that WebFlow can no longer tell how far the page is scrolled. Chances are that anything that has WebFlow scroll interactions applied may appear glitchy. When using the effect, I also had to apply data attributes to each section. Not sure if there’s a way to exclude certain sections

Build preview: LINK
Page URL: