Back to Blog

How to Add Smooth Scrolling to Webflow Website

Tutorials
February 25, 2020

Learn how to add smooth scrolling to your webflow site, for a modern intertia type effect.

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.

OTHER BLOG ARTICLES

Check out some other articles!

Join Over 55,000+
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 55,000+ other creators across our communities.