How to Add Smooth Scrolling to Webflow Website

Overview 📚

Luxy.js is a popular inertia (a.k.a momentum) scroll effect that causes your websites scrolling to gradually slow to a stop as opposed to stopping immediately. This can be used to make your sites scrolling experience feel smoother, but is very much a stylized effect that shouldn't be overused.

To add this into your project, follow the simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:Before </body> tag" "id:904096d55fdc9f00fa5cd2ce47a6045a" }}

‍

Instructions ✍️

1. Add the custom code into your page settings.

Firstly, you will want to add the script to your page, or project settings. You can add this into the before </body> section of your code section.

2. Add a div-block that wraps all elements on your page

Add a div-block to your page and this will be used to wrap all our page elements.

3. Make sure the div-block has the #ID 'luxy'

Add the #ID luxy to your main page wrapper. All elements inside the wrapper will have this smooth scroll effect.