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.