JavaScript

Web Design Secrets, Part 1: Smooth Scrolling

How do many AWWWARDS-style websites feel so smooth?

With content that glides with momentum, buttery smooth 3D Spline graphics and parallax images that work so well.

They all use JS libraries that require some coding:

GSAP ScrollSmoother (paid)
Lenis (free)

But if you go to this Webflow cloneable: Lenis Smooth Scroll Webflow Master, you can copy and paste the code, and you’ve got smooth scrolling as well.

Get the code with one click (technically, two...)

This is the code it will copy for you:

<!--
<script
	data-id-scroll
	data-autoinit="true"
	data-duration="1"
	data-orientation="vertical"
	data-smoothWheel="true"
	data-smoothTouch="false"
	data-touchMultiplier="1.5"
	data-easing="(t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))"
	data-useOverscroll="true"
	data-useControls="true"
	data-useAnchor="true"
	data-useRaf="true"
	data-infinite="false"
	defer
	src="https://assets-global.website-files.com/645e0e1ff7fdb6dc8c85f3a2/64a5544a813c7253b90f2f50_lenis-offbrand.txt">
</script>
-->

Just make sure to remove the  from the code for it to work, like this:

<script
	data-id-scroll
	data-autoinit="true"
	data-duration="1"
	data-orientation="vertical"
	data-smoothWheel="true"
	data-smoothTouch="false"
	data-touchMultiplier="1.5"
	data-easing="(t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))"
	data-useOverscroll="true"
	data-useControls="true"
	data-useAnchor="true"
	data-useRaf="true"
	data-infinite="false"
	defer
	src="https://assets-global.website-files.com/645e0e1ff7fdb6dc8c85f3a2/64a5544a813c7253b90f2f50_lenis-offbrand.txt">
</script>

Then you can paste it on the </body>, or at the bottom of your website.

Free Webflow cloneable templates in the video

Iridescent.ai - Spline + Webflow landing page

Use with caution

This works great on site that pair it with staggered letter animaiosn, parallax images and 3D graphics. It won't have too much affect on "regular" websites. And don't forget - don't overdo it, as it may feel "sluggish", slow and may hurt UX if overdone according to the article Scrolljacking 101 by the Nielsen Norman Group.