Having number counter animation only count once

Ask the community
1

I need help with making the number counter animation count once. I have it onviewpoint, so it first starts counting when you have scrolled down to the section. Then i tried to add a clearInterval() I want it to only count once, and when you scroll away from the section and back that it didn’t keep start a new count. The below section doesn’t contain the code i tried to use to make it stop counting after the first time. Can anyone help me to add the code that would make it count only once, even when leaving and reentering the section.

 $w.onReady(function () {

    function countElement(element, startValue, endValue, prefix = "", suffix = "") {
            
             const duration = 3000;
             const increment = (endValue - startValue) / (duration / 20);
             let currentValue = startValue;
			 
     
             const timer = setInterval(() => {
                 currentValue += increment;
                 $w(element).text = prefix + `${(Math.round(currentValue)).toLocaleString('da-DK')}${suffix}`;
     
                 if (currentValue >= endValue) {
					 $w(element).text = prefix + `${endValue.toLocaleString('da-DK')}${suffix}`;
                     clearInterval(timer);
                 }

             }, 20);
         }
     
     
  
     $w('#section2'). onViewportEnter(async () =>{
		 await countElement("#text33", 2000,6060 , "", "%");
		 await countElement("#text36", 2000,6260 , "", "%");
	 })
});
2

You can just create a new variable and activate it for the first time on viewport enter. Very simple actually. Something like this:

// before on ready and outside any function
let renderTimer = false

For your event handler function (section 2 code) → add a if statement and you’re good to go

$w('#section2').onViewportEnter(() => {
  if (!renderTimer) {
    countElement("#text33", 2000, 6060, "", "%");
    countElement("#text36", 2000, 6260, "", "%");
    renderTimer = true
  }
})
1 Like
3

I can’t get it to work. Everytime i leave the section and reenter the counting starts again.
This is how the code looks after i tried to add your variable:

 let renderTimer = false
 $w.onReady(function () {

    function countElement(element, startValue, endValue, prefix = "", suffix = "") {
            
             const duration = 3000;
             const increment = (endValue - startValue) / (duration / 20);
             let currentValue = startValue;
			 
     
             const timer = setInterval(() => {
                 currentValue += increment;
                 $w(element).text = prefix + `${(Math.round(currentValue)).toLocaleString('da-DK')}${suffix}`;
     
                 if (currentValue >= endValue) {
					 $w(element).text = prefix + `${endValue.toLocaleString('da-DK')}${suffix}`;
                     clearInterval(timer);
                 }

             }, 20);
         }
     
     
  
     $w('#section2'). onViewportEnter(async () =>{
         if (!renderTimer) {
             await countElement("#text33", 2000,6060 , "", "%");
             await countElement("#text36", 2000,6260 , "", "%");
             Rendertimer = true
         }
	 })
});
4

I have fixed the issue. Thank you!