Instructions

Below are all elements using GSAP:

• [data-counters] → Main trigger → Activates counter animation

• [data-target] → Target value → Defines final number (e.g., 100, 2.5)

• [data-decimal] → Decimal control → Enables decimal output when set to "true"

• [data-blur-reveal] → Multiple elements with the attribute will automatically animate in sequence

• [data-heading-blur-reveal] → Words are split and revealed sequentially with a staggered animation.

You can easily control animation behavior by editing these values:

duration: 4

✍️ Example:

• 2 → faster

• 4 → default

• 6 → slower

delay: 0.5

✍️ Adds delay before animation starts

y: 24

✍️ Controls how far the element moves during the reveal.

stagger: 0.12

✍️ Adds a delay between multiple elements.

ease: 'power2.out'

✍️ Example:

• power1.out → soft

• power2.out → smooth (default)

• power3.out → stronger

• linear → no easing

once: true

• true → animation runs only once

• false → replays on scroll

Follow these steps to disable the counter animation:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js" defer></script>

// Comment or delete this block
window.addEventListener('DOMContentLoaded', () =>   ...
);

• Save changes

• Publish your project