<div class="el">
    <dl>
        <dd class="rig">
            <div class="inner">
                <ul class="list">
                    <li>
                        <p>피해자 법률 지원 누적</p>
                        <span class="count">
                            <strong><strong>3,000</strong> 건</strong>
                        </span>
                    </li>
                    <li>
                        <p>성범죄 피해 전담 변호사</p>
                        <span class="count">
                            <strong><strong>40</strong> 명+</strong>
                        </span>
                    </li>
                </ul>
            </div>
        </dd>
    </dl>
</div>

<script>
gsap.registerPlugin(ScrollTrigger);

const el_count = {
    init: function () {
        this.action();
    },
    action: function () {
        ScrollTrigger.create({
            trigger: '.el',
            start: 'top center',
            once: true,
            onEnter: function () {
                document.querySelectorAll('.el .list .count strong strong').forEach(function (el) {
                    const target = Number(el.textContent.replace(/,/g, ''));
                    const obj = { count: 0 };

                    gsap.to(obj, {
                        count: target,
                        duration: 1.5,
                        ease: 'power2.out',
                        onUpdate: function () {
                            el.textContent = Math.floor(obj.count).toLocaleString();
                        }
                    });
                });
            }
        });
    }
};

el_count.init();
</script>