Hello guys,
I want to implement Locomotive.js -Scrool Smooth in webflow and i don’t know how to do this.
I tried another versions of Smooth Scrolling like luxy or vanilla.js but with that versions not working position sticky .
Can you please help me to implement Github link to webflow?
I just implemented Locomotive Scroll in my webflow site.
In order to use Locomotive, you need to reference the CDN hosted locomotive scroll, i.e. https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js , within your script tags.
In order to use Locomotive, you need to use it using the correct HTML structure as shown on their sample found on their GitHub page, GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.
The way this script works is by looking for a tag so in this example it is “data-scroll-container” which then referenced in the javascript snippet.
You are not alone, locomotive is hard to get your head around initially but it is all possible.
Follow this through, GreenSock ScrollTrigger and Smooth Scroll – snorkl.tv - it is not webflow but he does explain a bit about Locomotive which should help you understand.
Can you please provide your website to can copy what you did there?
I am a no coder, so my knowledge is limited.
Also, if you can not provide your website, please make a webflow project where you compose the locomotive.js
I saw on this forum there is a big problem with locomotive.js to implement in webflow.
Many thanks
like you im no coder either, it took me a while to figure it out. The issue is that the proper coders or front-end developers create packages and bundle javascript files like locomotive inside it.
For my example, I inherited an existing bundle someone else had made which I made. I don’t know how to use tools like NPM to make bundles.
Here is something, I put together for you to look at, https://preview.webflow.com/preview/locomotivedemo?utm_medium=preview_link&utm_source=designer&utm_content=locomotivedemo&preview=581d30be869ba8c87412fbf8353b8d2a&mode=preview
I’m assuming you know how to access where to put your custom code inside the and tags inside webflow?
Can you let me know if this works for you? If it doesn’t then I have another demo which I will upload tomorrow that uses GSAP and Locomotive.
I have updated the sample code I had given you because there is a much better option that uses a combination of GSAP and locomotive scroll.
You have to reference the Locomotive CSS file as well as the following javascript files
locomotive-scroll.min.js
gsap.min.js
ScrollTrigger.min.js
I’m assuming you do understand how to access the and of each HTML page in Webflow? All the information you need is in the custom section of home.html in my demo.
As you can see from the sample code, my parent div has class named “.smooth-scroll”. The locomotive javascript needs to know where to start the scrolling from therefore in the code:
const locoScroll = new LocomotiveScroll({
el: document.querySelector(“.smooth-scroll”),
smooth: true
});
You will see “.smooth-scroll” being passed through. Then ScrollTrigger uses the same parent class too.
The code is simple to follow through which was taken from Snorkl TV . If you go through his example, he explains what is happening. Snorkl has a lot of great videos on learning GSAP. Even I am still learning and making mistakes. It is a hard but makes you appreciate more what others have done.
I do hope this helps you.
I implemented the script and smooth scrolling works perfectly. But the same problem arises, the sticky sections do not work at all.
You can see below the link with the live project and the read only project:
https://portofoliu-proiect.webflow.io/
Any solution there?
Many thanks
Good to hear. So did you implement it with GSAP & Locomotive Scroll? If so then I am afraid that is my limit of GSAP. It is something you will need to investigate further on your own.
Perhaps you can create a cut down version of your problem on CodePen and ask the question on Greensock. In the meanwhile does this help, ScrollTrigger pinning element both top and bottom? - GSAP - GreenSock
I can confirm this works with sticky elements if you follow it slowly step by step. You only need to name your classes correctly and add custom code to the page settings. A link to the CSS-file in the head tag, and the rest “before body tag”.
https://www.youtube.com/watch?v=JnLn8Rq4p_I
is this solution fully compatible with Webflow interactions?
As far as I have tried at least. The only Webflow thing that has not worked is the sticky part. You have to custom code the sticky.
Good Codepen to look at https://codepen.io/GreenSock/pen/ExPdqKy
If there is no interference, this is the thing I have been looking for quite a time, thank you!
I guess I need to test it. Would be a dream if it is also compatible with swup js.
Hope it’s not gonna be a nightmare trying to set things up.
Unless you are planning something super fancy this is an easy way to do page transitions Easiest Way to Build Webflow Page Transitions - YouTube
Thanks for that.
I plan to use swup js on some specific projects and I just found out, there are a couple of sites that use barba js in combination with locomotive.
If you are curious about it, you can find them on the featured section on the very bottom of locomotive github page.
So I guess, chances are good, swup will work here. If there are any issues which I won’t be able to resolve, I will dig some in barba js to achieve what I have in mind.
Still prefer css transitions over js ones.