8 min read

How to easily do a smooth scroll in Webflow?

Sick of the clunky scrolling in Webflow? Our simple code solution with the Lenis library brings smooth scrolling without disrupting your animations. Say goodbye to frustration and hello to a seamless experience. Read more now!
Written by
Khalil Boukhelifa
Published on
April 22, 2023

Are you a Webflow user frustrated with the lack of a smooth scrolling option?

Look no further! I've found a solution that won't interfere with your Webflow animations. And the best part? It's incredibly easy to implement.

Simply copy and paste the provided code into your Webflow project's /body section, and you'll have a smooth scroll effect in no time.

Here is the code:

You have two ways to copy paste the code.

1. Per page

Copy paste in the body of your page. Javascript goes always in the body because you will have a faster Loading:

Placing JavaScript code at the bottom of the body section ensures that the HTML and CSS content loads first, resulting in faster loading times. If JavaScript code is placed in the head section, it may block the rendering of the page until the entire script is loaded, leading to slower page load times.

Custom code page designer Webflow

Here the code will only affect the desired page.

2. All the website

Here you will paste the code into the website settings of your Webflow project.

The code that is inside the settings will affect all your pages directly.

Custom code settings in Webflow

That's it for an easy smooth scroll animation in Webflow using Lenis's library.

Weekly newsletter
No spam. Just the latest releases and tips, interesting articles, and exclusive interviews in your inbox every week with Khalil, Jokan's founder.
Read about our privacy policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.