Instructions

Smooth Scroll (Lenis) – Add, Remove and Disable

This template includes smooth scrolling powered by the Lenis library. Lenis replaces the default browser scrolling behavior with a smoother and more modern scrolling experience.

Instead of jumping instantly between scroll positions, Lenis creates a subtle animated movement that improves the overall user experience of the website.

The script runs automatically after the page loads and applies smooth scrolling to the entire website.

How it works

The Lenis script initializes smooth scrolling and continuously updates the scroll animation using a browser animation loop. This keeps scrolling fluid and synchronized with the browser rendering engine.

How to disable smooth scrolling

If you do not want smooth scrolling on your website, simply remove the Lenis script from the Page Settings or Site Custom Code section where it was added.

Remove the following script block:

<script src="https://unpkg.com/lenis@1.1.20/dist/lenis.min.js"></script>

<script>
const lenis = new Lenis({
    smooth: true,
    lerp: 0.1,
    wheelMultiplier: 1,
    infinite: false
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

After removing this code, the website will automatically return to the default browser scrolling behavior.

GSAP Counter Animation – Add, Remove and Disable

This template includes animated number counters powered by GSAP and ScrollTrigger. These counters are commonly used for statistics sections such as achievements, metrics, or company highlights.

When the user scrolls and the element becomes visible in the viewport, the number will animate smoothly from 0 to its final value.

How to enable a counter

To enable the counter animation, add the class below to any text element:

data-counter

Once the element has this class, the number will automatically animate when it appears on the screen.

Optional customization

The counter behavior can be customized using HTML data attributes.

data-target – defines the final number value
data-duration – controls the animation speed
data-delay – adds delay before animation starts
data-ease – controls the easing animation style
data-start – controls when the animation triggers on scroll

Example:

<span class="data-counter"
data-target="3.5K"
data-duration="1.5"
data-delay="0.2">
3.5K
</span>

Supported number formats

The counter system supports formatted numbers including:

K – thousands
M – millions
B – billions

The script automatically converts these values internally and displays them correctly during the animation.

How to disable the counter animation

There are two simple ways to disable the counters.

Method 1
Remove the class data-counter from any element. Without this class, the script will ignore the element and no animation will run.

Method 2
Remove the GSAP counter script from the custom code section where it was added.

After removing the script, all numbers will display normally without animation.

Summary

The template includes smooth scrolling using Lenis and animated number counters powered by GSAP. Both features enhance the visual experience of the website and can be easily enabled or disabled depending on your needs.