[GSAP] ScrollTrigger 숫자 카운팅

[★]  플러그인 

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> 
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

1. 해당 요소에 스크롤시 숫자 카운트

[Html]

 <div class="blank"></div>

    <div class="number_wrapper">

        <div id="number">0</div>

   </div>

[Css]

 <style>

        * { margin: 0; padding: 0; }

        .blank { height: 3000px; background-color:grey; }

        .number_wrapper { background-color:grey; text-align:center; min-height: 1000px;}

        #number { font-size:25vw; font-family:sans-serif; font-weight:600; color: #444444; }

    </style>

[Script]

   <script>

        gsap.registerPlugin(ScrollTrigger);

        var startCount = {count: 0};

        gsap.to(startCount, { count: 1000, duration: 3, ease:"none",

        onUpdate: changeNumber,

            scrollTrigger: {

                trigger: "#number",

            },

        })

        function changeNumber() {

            number.innerHTML = (startCount.count).toFixed();

        }

  </script>

 

2. 해당 요소에 스크롤시 숫자 카운트 & 숫자 초기화

[Script]

   <script>

        gsap.registerPlugin(ScrollTrigger);

        var startCount = {var: 0};

        gsap.to(startCount, { var: 1000, duration: 3, ease:"none",

        onUpdate: changeNumber,

        scrollTrigger: {

            trigger: "#number",

            toggleActions: "restart none reverse none",

        },

        })

        function changeNumber() {

            number.innerHTML = (startCount.var).toFixed();

        }

   </script>

 

3. 해당 요소에 스크롤시 숫자 카운트 & 스크롤에 따른 숫자 변화

[Script]

   <script> 

       gsap.registerPlugin(ScrollTrigger);

        var startCount = {var: 0};

        gsap.to(startCount, { var: 1000, duration: 3, ease:"none",

        onUpdate: changeNumber,

        scrollTrigger: {

            trigger: "#number",

            scrub: true,

            start: "top 80%",

            end: "+=150% 80%",

        },

        })

        function changeNumber() {

            number.innerHTML = (startCount.var).toFixed();

        }

   </script>

 

4. 소수 자리 표현

[Script]

   <script> 

   

gsap.registerPlugin(ScrollTrigger);

        var startCount = {var: 0};

        gsap.to(startCount, { var: 123.5678, duration: 2, ease:"none",

        onUpdate: changeNumber,

        scrollTrigger: {

            trigger: "#number",

            toggleActions: "restart none reverse none",

            start: "top 80%",

            end: "+=150% 80%",

        },

        })

        function changeNumber() {

            number.innerHTML = (startCount.var).toFixed(4);

        }

   </script>

 

 

:) 참고링크

티스토리 참고링크

https://lpla.tistory.com/106