Count Animation

This animation adds a dynamic count-up effect to elements with the .has_count_anim class. As the element scrolls into view, its text content smoothly increments from 0 to the target number defined in the data-count attribute. The animation triggers only once, making it ideal for highlighting statistics, achievements, or other key numerical data in a visually engaging way.

Here is some basic code for count animation:

Use

import { useRef } from "react";
 
// gsap
import { useGSAP } from "@gsap/react";
import hasCountAnim from "@/lib/animation/hasCountAnim";
 
const containerRef = useRef<HTMLDivElement>(null!);
 
useGSAP(
  () => {
    hasCountAnim();
  },
  { scope: containerRef }
);
 
<div ref={containerRef}>
  <h3>
    <span data-count={500} className="has_count_anim">
      500
    </span>
      +
  </h3>
</div>