Locomotive scroll js

I welcome you. I really need help integrating this library GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.
the library allows for smooth scrolling + fixed elements, blocks and stiky. This is extremely important, such sites are very trendy with this library and allow you to do incredible things. Who is well versed in code, could you show how to integrate this into webflow?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

@George_Ershov - I’m not sure what you specifically want help with. You can certainly import the library using custom code. However, Webflow does a lot of this style animation on it’s own using interactions - I can see a potential conflict of interest/functionality there.

At the end of the day you chose Webflow (most likely) because of the promise of “no-code” - if you’re going to go outside of that completely, it may not be the right platform. Of course there are instances where bringing in custom code and functionality makes sense, but this appears to be a replacement for a lot of the built-in functionality offered by page scroll interactions.

If you have a specific goal you are trying to achieve I can help with that, but I can’t just tell you how to use this entire js library in general, not sure if that makes sense, but without a dev background it’s not going to be useful to you.

You could import the library using this CDN: https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js

dear friend, I will be extremely grateful if you can help me understand how to integrate this library into webflow.
Look what’s the matter:

  1. There is such a library called luxy.js - this library allows you to create smooth scrolling of the page and there are instructional videos on how to integrate it into webflow. I was able to do this BUT, this library does NOT allow elements with positioning: fixed or sticky to be placed inside the main div. This is an IMPORTANT problem: ((
    I really really really want to achieve effects like on this site: https://thierrychopain.com/
    I can do the same thing, BUT without a smooth scroll. I know how to create such things, it’s not difficult, sticky positions are used there. BUT this does not look so beautiful as with a smooth scroll.
    All modern sites published at https://www.awwwards.com/ have long been used by this library to create masterpieces!
    Please, if you know how to do smooth scrolling + sticky using the locomotive.js library, tell me!

@George_Ershov - so are you only trying to use locomotive rather than luxy?

my friend, my task is so that I can create a website with a smooth scroll and so that I can add sticking elements. You can see such an effect on this site: https://cuberto.com/ you see here the projects stick on the right, and the text continues to scroll. I want to achieve the same effect in webflow. I don’t care which library to use, locomotive.js or gsap (scrollTrigger.js) or luxy.js. The main task is to easily integrate into the web flow without much effort and without writing your own website in visual studio code.

the difficulty is that I don’t understand JS and I have to learn a lot to understand the gsap library (scrollTrigger.js). I want to easily achieve the same effect with the help of webflow. For example, luxy.js is inserted in a small piece of code into the page and all the content needs to be thrown into a div with a specific id and everything is very simple, BUT because of this script fixed and sticky elements stop working, which really upsets me.

Hey guys,

I’m also trying to find a tutorial how to use Locomotive scroll.js. Apparently, luxy.js doesn’t work on sticky position. If we could have some help, it would me be appreciated. Thanks

1 Like

Interested in this as well.

hey have you been able to get an answer

It is easy to do, I recommend you to study the documentation. It’s all elementary!)

i have done that and implemented it on webflow but it still affecting my sticky div i have added custom div attribute data - scroll - sticky and the data - scroll - target to it and it still not working
https://preview.webflow.com/preview/slice-d8f27d?utm_medium=preview_link&utm_source=designer&utm_content=slice-d8f27d&preview=eb6b1594b8cc69884191f1fe68ec03a4&mode=preview
thats my read only link

1 Like

@sam-g @InFlowZen @ameh @Coraline_Oscar Hi all. Look this post Position "sticky" does not work with luxy.js - #21 by George_Ershov