Instruction Guide

GSAP Smooth Scroll Effect

Open Site Settings → Custom Code → before </body> tag.
Paste the code bellow:

<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script> 
<script>
const lenis = new Lenis()

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
</script>

1. The Structure

Element: <span> or <div>
Class Name: counter-number
Content: Type the final number you want the counter to reach (e.g., 150).

2. How it Works

The script automatically detects the number you typed in the editor, resets it to 0, and animates it up to your target value once it enters the viewport.

3. Paste the code

Copy and paste this entire block into the Before </body> tag section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  // Target all elements with the class .counter-number
  const counters = document.querySelectorAll(".counter-number");

  counters.forEach((counter) => {
    const targetValue = parseInt(counter.innerText); // Get the number you typed in Webflow
    counter.innerText = "0"; // Reset it to 0 before animating

    gsap.to(counter, {
      innerText: targetValue,
      duration: 3.8,
      snap: { innerText: 1 }, // Forces the number to stay an integer (no decimals)
      scrollTrigger: {
        trigger: counter,
        start: "top 80%", // Starts when the number is 80% down the screen
      }
    });
  });
</script>

Instruction Guide

GSAP Smooth Scroll Effect

Stay Updated with Olipy