📘 Client Guide: Advanced Counter + Smooth Scroll (GSAP + Lenis)

🎯 How This Works

• Smooth scrolling is powered by Lenis
• Counter animation is powered by GSAP + ScrollTrigger
• Counters animate when they enter the viewport

🔢 1. How to Edit Counter Values

Each counter uses custom attributes (no class needed):

<span counter-animation data-count="500" data-decimals="0" data-suffix="+">0</span>


✏️ Editable Fields:

• data-count → final number
• data-decimals → decimal places
• data-suffix → text after number
• data-duration → animation speed

✅ Example:

<span counter-animation
     data-count="99.9"
     data-decimals="1"
     data-suffix="%"
     data-duration="3">0</span>


👉 Output: 99.9%

⚙️ 2. Control Animation Speed

const duration = parseFloat(counter.dataset.duration) || 2;


👉 Change in HTML:

data-duration="1"   <!-- fast -->
data-duration="3"   <!-- slow -->


🎬 3. Change Animation Trigger Position

start: "top 80%",


👉 Options:

• "top 90%" → starts earlier
• "top 70%" → starts later
• "top 50%" → middle of screen

🔁 4. Run Once or Repeat

once: true


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

🌊 5. Lenis Smooth Scroll Settings

const lenis = new Lenis();


Basic Setup (already included):

• Smooth scroll enabled globally
• Integrated with GSAP ScrollTrigger

🔧 Optional Customization:

const lenis = new Lenis({
 duration: 1.0,   // scroll speed
 smoothWheel: true,
 smoothTouch: false
});


🧩 6. Add New Counter (Step-by-Step)

1. Add a text element
2. Add attribute:

counter-animation


3. Add settings:

data-count="300"
data-decimals="0"
data-suffix="+"
data-duration="2"


4. Set default text: 0

🚀 7. Common Issues

❌ Counter not working

• Missing counter-animation attribute
• Missing data-count
• GSAP or ScrollTrigger not loaded

❌ Scroll not smooth

• Lenis script not added
• GSAP not synced properly

❌ Counter not triggering

Adjust:

start: "top 80%"


⚠️ 8. Important Notes

• Use numbers only in data-count
• Keep decimals reasonable (e.g. 1–2 max)
• Avoid extremely large numbers (100k+)
• Do not remove GSAP or Lenis scripts

✅ Summary

• Edit number → data-count
• Add decimals → data-decimals
• Add text → data-suffix
• Control speed → data-duration
• Smooth scroll → handled by Lenis

‍