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: 1,
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-->4. How to adjust the scroll speed
The scroll behavior can be customized and fine-tuned within the second script.
1lerp: 1,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.
GSAP Counter Number Animation Guide
The counter animation can be controlled without changing any code. It works using a special custom attribute.
1. Where the code is added
Go to Webflow Project Settings → Custom Code → Inside <head> tag and add:
1<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>This makes the counter-number library accessible throughout your project.
2. Initialize Counter Number Animation
Go to Webflow Project Settings → Custom Code → Before </body> tag and add:
1<script>
2// Register ScrollTrigger if you use it
3gsap.registerPlugin(ScrollTrigger);
4
5// Select your counter elements
6const counters = document.querySelectorAll('.counter-number');
7
8counters.forEach(counter => {
9// Get the target value from the data-target attribute
10const targetValue = parseInt(counter.getAttribute('data-target'));
11
12// Create a JavaScript object that will animate the GSAP
13const count = {
14value: 0
15};
16
17// Create a GSAP Tween
18gsap.to(count, {
19// The value at the end of the animation will be targetValue
20value: targetValue,
21
22// How long the animation will last (in seconds)
23duration: 2.1,
24
25// What happens each time the value is updated
26onUpdate: () => {
27// Convert the current value to an integer and set the innerText of the element
28counter.innerText = Math.ceil(count.value).toLocaleString('en-US');
29// .toLocaleString('en-US') is used to add a comma (e.g. 1,500)
30},
31
32// When the animation starts will start
33scrollTrigger: {
34trigger: counter, // this element will be triggered
35start: 'top 80%', // will start when the element reaches 80% of the top of the viewport
36once: true, // the animation will only run once
37},
38
39// the animation's easing function (speed)
40ease: 'power1.out'
41});
42});
43</script>This script triggers the counter animation and keeps it running as the user navigates the page.
3. How to Disable the Animation
To temporarily disable GSAP animations without deleting your code:
1<!--
2ALL THE CODE HERE
3-->4. How to change the number?
1.
Find the element: Mark your animated counter number (e.g. "1,500+") in Webflow Designer.
2.
Check class name: Make sure this element's class name is "counter-number"
3.
Edit attributes: In the settings panel on the right (Element Settings), go to the Custom Attributes section.
4.
Set a new value: Go to the Value field and type your desired new ending number, For example (7500).
5.
Publish the website. The number will count up to the new target as you scroll.
