Lenis
Script
Setup
Smooth
Scrolling
Search
K
Documentation
Adlis Smart
Code
Setup: External Scripts
External Scripts in Adlis Smart
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Adlis Smart project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>
Step 1: Copy structure to Adlis Smart
Copy structure to Adlis Smart
In the video below we described how you can copy + paste the structure of this resource to your Adlis Smart project.
Copy to Adlis Smart
Adlis Smart structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
Step 2: Add custom Javascript
Custom Javascript in Adlis Smart
In this video, Ilja gives you some guidance about using JavaScript in Adlis Smart:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
// Lenis
const lenis = new Lenis({
autoRaf: true,
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Adlis Smart
Curious about where to put custom CSS in Adlis Smart? Ilja explains it in the below video:
CSS
Copy
Implementation
Documentation
For all instance settings please read the Lenis Documentation on Github
Nested Scroll
For modals or other elements that have overflow: scroll; add the data-attribute [data-lenis-prevent]
Stop/Pause Scroll
Call lenis.stop(); to disable the scroll for the user, for example when opening a modal.
Start Scroll
Call lenis.start(); to enable scroll again.
Scroll-To Anchor Target
For more information how to implement lenis.scrollTo(): Lenis Scroll-To Anchor Target
Using with GSAP Scrolltrigger
// Lenis (with GSAP Scroltrigger)
const lenis = new Lenis();
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {lenis.raf(time * 1000);});
gsap.ticker.lagSmoothing(0);Search
K
Resource Details
Last updated
April 1, 2025
Type
Osmo Basics
Category
Utilities & Scripts
Need help?
Join Slack
Original source
LenisCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.