GSAP

Here, you can access all GSAP classes, the Webflow variables linked to GSAP, and instructions on how to disable GSAP. This allows you to fully customize and significantly modify this template.

Overview

This template uses GSAP (GreenSock Animation Platform) and ScrollTrigger to create smooth, interactive animations. Additional libraries include SplitType for text animations. With this setup, you can:

• Counter on scroll

Counter animation

<script>
//COUNTER ON SCROLL
document.querySelectorAll('.counter-animation').forEach(el => {
  const finalValue = el.textContent.trim();

  gsap.set(el, { textContent: "0" });
  
  ScrollTrigger.create({
    trigger: el,
    start: "top 80%",
    once: true,
    onEnter: () => {
      gsap.to(el, {
        duration: 3,
        scrambleText: {
          text: finalValue,
          chars: "0123456789",
          revealDelay: 0.2
        },
        ease: "power3.out"
      });
    }
  });
});
</script>

This script automatically animates any number on your page by “scrambling” from 0 to the final value when the element scrolls into view.
You don’t need to configure anything—just apply the class counter-animation to any text element containing a number.

• Add a text element in Webflow (e.g., Heading, Paragraph, Text Block).
• Set the final number you want to display (example: 1500).
• Add the class "Counter Animation" or "counter-animation"  to that element.
• The animation will automatically trigger when the user scrolls to that section.