Home
/
Instructions

Instructions

This page provides helpful tips for customizing advanced features.

Buy Template
Buy Template

Counting Animation (GSAP)

This guide explains exactly how to set up your counter animation in Webflow using your custom GSAP code.

What This Animation Does:

The counter animation automatically counts from 0 to the number you place inside the element — even if the number has special characters like “+”, “%”, “K”, etc. Example: 250+ → it will count from 0 to 250+.

The animation starts only when the user scrolls the number into view.

Webflow Setup (Structure)

Step 1 — Add a wrapper

  • Add a div block

  • Give it this class: counter_wrapper

Step 2 — Add the number element

  • Inside the wrapper, add a Text Block

  • Give it this class: counter

  • Type your final number inside the text (example: 450+, 2,500, 90%, etc.)

Webflow Custom Code Placement

Step 1 — Add GSAP + ScrollTrigger

Place your GSAP CDN scripts in:
Project Settings → Custom Code → Head

<!-- GSAP Core -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>

<!-- GSAP ScrollTrigger -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollTrigger.min.js"></script>

Step 2 — Add your custom script

Paste your full code inside:
Project Settings → Custom Code → Footer

<script>

  gsap.registerPlugin(ScrollTrigger);

  document.addEventListener("DOMContentLoaded", () => {
    initCounterAnimations();
  });

  /* ========== GSAP COUNTER ========== */
  function initCounterAnimations() {
    const counters = document.querySelectorAll(".counter");

    counters.forEach((counter) => {
      const targetText = counter.textContent.trim();
      const targetNumber = parseFloat(targetText.replace(/[^\d.]/g, "")) || 0;
      const suffix = targetText.replace(/[\d.,\s]/g, "");

      // Start from 0
      gsap.set(counter, { innerText: 0 });

      gsap.to(counter, {
        innerText: targetNumber,
        duration: 3.5,
        ease: "power2.out",
        snap: { innerText: 1 },
        scrollTrigger: {
          trigger: counter,
          start: "top 85%",
          toggleActions: "play none none reset"
        },
        onUpdate: function () {
          const value = Math.ceil(this.targets()[0].innerText);
          counter.innerText = value.toLocaleString("en-US") + suffix;
        }
      });
    });
  }
</script>

  • It looks at the text inside .counter and extracts the number part.

  • It resets the counter to 0 before the animation starts.

  • Using GSAP, it smoothly counts from 0 → your final number.

  • The animation starts when the user scrolls to 85% of the viewport height (near visible area).

  • You can adjust the animation duration by changing the value of duration.

  • You can adjust the animation easing by changing the value of ease.

  • You can adjust the animation scroll start point by changing the value of start.

Removing Counting Animation

If you want to remove the GSAP Number counting animation from your project, follow these steps:

  • Go to your Site Settings → Custom Code → Footer Code.

  • Find the script below with the comment: GSAP COUNTER

  • Delete the script that appears below this comment. And it's done

  • Or if you want to keep the code but want to delete the animation from an element , just remove the class: counter