📘 Client Guide: GSAP Counter Editing

🎯 How It Works

This script animates numbers from 0 → target value when the element scrolls into view.

🔢 1. Change Counter Number

Each counter uses a data attribute:

<span class="counter" data-target="500">0</span>


👉 To edit:

• Select the element with class counter
• Change:

data-target="500"


to any number (e.g. 1000, 250, 75)

⚙️ 2. Change Animation Speed

duration: 2,


👉 Adjust:

• 1 = fast
• 2 = normal (default)
• 3+ = slow

🎬 3. Change When Animation Starts

start: "top 80%",


👉 Options:

• "top 90%" → starts earlier
• "top 70%" → starts later
• "top 50%" → starts mid-screen

🔁 4. Run Once or Repeat

once: true


• true → animation runs once ✅
• false → repeats on scroll

🎨 5. Add Symbol (+, %, K)

Edit this part:

onUpdate: function () {
counter.innerText = Math.floor(counter.innerText);
}


Example with "+":

counter.innerText = Math.floor(counter.innerText) + "+";


Example with "%":

counter.innerText = Math.floor(counter.innerText) + "%";


🧩 6. Add New Counter

1. Add a text element
2. Add class:

counter


3. Add attribute:

data-target="300"


4. Set default text:

0


🚀 7. Common Issues

❌ Counter not working

• Class must be counter
• Must include data-target
• GSAP + ScrollTrigger must be loaded

❌ Numbers showing decimal

✔ Already fixed with:

Math.floor(counter.innerText)


❌ Animation not triggering

Adjust:

start: "top 80%"


💡 Best Practice

• Use whole numbers only
• Keep values under 100,000 for smooth animation
• Do not rename the class counter

✅ Summary

• Edit number → data-target
• Control speed → duration
• Control trigger → start
• Add symbol → modify onUpdate

‍