GSAP lenis smooth scroll Guide
This template uses Lenis to deliver a smooth, modern scrolling experience across all pages. By replacing the browser’s default scroll behavior, Lenis creates a more fluid motion that enhances animations and transitions throughout the site.
1. Add Lenis Script & Styles
Go to Webflow Project Settings → Custom Code → Inside <head> tag and add:
1<!-- Lenis script and styles -->
2<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>
3<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.4/dist/lenis.css">This makes the Lenis library accessible globally throughout your project.
2. Initialize Lenis
Go to Webflow Project Settings → Custom Code → Before </body> tag and add:
1<!-- Lenis setup -->
2<script>
3// Initialize Lenis
4const lenis = new Lenis({
5 smooth: true,
6 lerp: 0.1,
7 wheelMultiplier: 0.9,
8 infinite: false,
9});
10
11// Use requestAnimationFrame to continuously update the scroll
12function raf(time) {
13 lenis.raf(time);
14 requestAnimationFrame(raf);
15}
16
17requestAnimationFrame(raf);
18</script>This script initializes the smooth scrolling effect and keeps it active as the user navigates the page.
3. How to Disable the Animation
To temporarily disable GSAP Lenis animations without deleting your code:
1<!--
2ALL THE CODE HERE
3-->This template uses Lenis to deliver a smooth, modern scrolling experience across all pages. By replacing the browser’s default scroll behavior, Lenis creates a more fluid motion that enhances animations and transitions throughout the site.
4. How to adjust the scroll speed
The scroll behavior can be customized and fine-tuned within the second script.
1lerp: 0.9,This setting controls the smoothness and speed of the scroll.
- Lower values (e.g., 0.05) result in a slower and smoother scroll.
- Higher values (e.g., 0.3) result in a snappier and faster scroll.
.jpeg)
