Smooth Scrolling
Make your page butter smooth with Lenis Smooth Scroll
David Gim
Sunday, 16 February 25
DEMO | LENIS
When I first encounted smooth scrolling it was a wow moment for me. I never realised how just a scrolling effect can give noticeably better user experience.
There are few ways to achieve this including CSS only method but if you want to make it butter smooth like a chardonnay you'll need to use some javascript library. So today I am going to be using Lenis Smooth Scroll.
After installing Lenis (npm i lenis) I setup as follow:
When I first encounted smooth scrolling it was a wow moment for me. I never realised how just a scrolling effect can give noticeably better user experience.
There are few ways to achieve this including CSS only method but if you want to make it butter smooth like a chardonnay you'll need to use some javascript library. So today I am going to be using Lenis Smooth Scroll.
After installing Lenis (npm i lenis) I setup as follow:
import styles from "./styles.module.scss";
import image1 from "./i1.jpeg";
import image2 from "./i2.jpg";
import image3 from "./i3.jpg";
import Lenis from "lenis";
export const SmoothScroll = () => {
const lenis = new Lenis({
autoRaf: true,
easing: (t) => t * (2 - t),
smoothWheel: true,
duration: 1.2,
});
return (
<main>
<div className={styles.container}>
<img src={image1} className={styles.i1} />
<img src={image2} className={styles.i2} />
<img src={image3} className={styles.i3} />
</div>
</main>
);
};There are many other properties for Lenis if you like to take a closer look. However for simplicity sake the properties I've added are:
- easing: (t) => t * (2 - t), This defines the easing function for the smooth scrolling. The function (t) => t * (2 - t) is a quadratic easing function, creating a "ease-in-out" effect where scrolling starts and ends slowly but moves faster in the middle. This makes the transition feel more natural.
- duration: 1.2, This option controls the duration of the smooth scroll animation. In this case, the scroll animation will take 1.2 seconds to complete. You can adjust this value to make the scroll faster or slower.
- smoothWheel: true, This option enables smooth scrolling for mouse wheel events. When the user scrolls with the mouse wheel, the page will scroll smoothly, rather than jumping in discrete steps.
- autoRaf: True, Lenis will automatically handle the requestAnimatedFrame loop for you, just works out of the box.
It's simple as that! we can customise this further by targeting individual element giving different scrolling effect for each and there are numerous properties besides ones above feel free to explore.
