カンマ

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

export function useAnimation () {
  function numberWithCommas (n: string) {
    const parts = n.toString().split('.');
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }

  function animate (targetSelector: string, targetSelectorBox: string) {
    nextTick(() => {
      gsap.from(targetSelector, {
        textContent: 0,
        duration: 3,
        ease: 'Power4.easeOut',
        snap: { textContent: 1 },
        stagger: {
          each: 1,
          onUpdate: function (this: gsap.core.Tween) {
            this.targets().forEach((target: unknown) => {
              const element = target as HTMLElement;
              const val = gsap.getProperty(element, 'innerText');
              element.innerText = numberWithCommas(String(val));
            });
          }
        },
        roundProps: 'innerText',
        scrollTrigger: {
          trigger: targetSelectorBox,
          start: 'center bottom-=20',
          end: 'bottom+=1000 top',
          markers: false
        }
      });
    });
  }

  return { animate };
}