Animated Numbers Animation Problem.

Ask the community
,
1

Hi,

I wanted to add an animated number element to my website.
Like ‘200 Coffees Consumed Till Now’ | ‘150 Deliveries Done Till Now’

Where the Numbers 200 & 150 will start count from 0.

I am using the following code for my Text Element (text140):

let startNum = 0;
let endNum = 200;
const duration = 75;

$w.onReady(function () {
setInterval(()=> {
countUp();
}, duration);
});

function countUp(){
if (startNum <= endNum ){
$w(‘#text140’).text = startNum.toString();
startNum++;
}}

The problem is that they start the count as soon as the page is loaded, and this element has been placed in the center of the webpage so by the time I scroll there, the count is already over.

Can’t it start its count when it enters the View Port ??

Any help is really appreciated.

1 Like
2

in the Editor create onViewportEnter event from properties panel on this element and add your code below that line so when this element enters the viewport it runs the animation.

You can check this page

3

already tried it, doesn’t work

It just keeps running as it is

4

I’m having the same problem.

I have a column strip at the end of the page (columnStrip6) with four animated numbers that count up.

I’ve tried creating an onViewportEnter event from properties panel and then inserting the Count Up codes below it, so that the animation only begins when columnStrip6 has entered the viewport. This doesn’t seem to work.

Could someone help us out? This is the code I’m using (and doesn’t work):

export function columnStrip6_viewportEnter(event, $w) {

let startNum = 0;
let endNum = 200;
const duration = 75;
$w.onReady(function () {
setInterval(()=> {
countUp();
}, duration);
});
function countUp(){
if (startNum <= endNum ){
$w(’ #text19 ').text = startNum.toString();
startNum++;
}}
}

Thank you so much!

5

Hi,
Instead of using the onReady function, use the onViewportEnter (meaning, the setInterval function should be moved to the onViewEnter event, and not the onReady function.

I hope it’s clearer now.

Best,
Tal.

6

Hi,

How can I specify this animation only plays once per page refresh?

To be specific, I would like:
The animation to begin when ViewportEnter, but only play one time.
At the moment it restarts each time I scroll back up the page.

The code I’m using is below:

export function text45_viewportEnter(event) {
//Add your code for this event here:
let startNum = 24999900;
let endNum = 25000000;
const duration = 50; // 1000 milliseconds

$w.onReady( function () {
setInterval(()=> {
countUp();
}, duration);
});

function countUp(){
if (startNum <= endNum ){
$w(‘#text45’).text = startNum.toLocaleString().toString();
startNum++;
}
}
}

7

I know this post is a bit old, but I am doing something similar so thought I would put the code in I came up with.

I did however make some modifications as I wanted the code to:

  • get the final number from the html (meaning I could design the page with final numbers in place)
  • allow multiple animations on the same page
  • get rid of the setInterval as the above code doesn’t stop the interval - which will slow the page
  • only have the animations play once

so what I did:

856×386 20 KB

 class Counter = {
     constructor(target) {
         this.el = target;
         this.from = 0;
         this.to = target.text;
         this.run();
     }
     run() {
         if (this.from < this.to) {
             this.from++;
             this.el.text = this.from.toString();
             setTimeout(this.run.bind(this), 20); // <= 20ms delay
         }
     } 
 }

The Counter class is a reusable function I can call, passing it a Wix element, taking the text out as the to value, and setting the from value as 0. We then call the run function which uses a timeout to loop the run function, but only if the from value is less than the to value.

in order to stop this being called every time the element enters the viewport, we need to store a record of which elements have been animated. we do this simply but storing the ID’s of the animated elements in an array, and searching the array prior to instantiating the Counter function to make sure the ID doesn’t already exist…

const counterManager = {
    arr: [],
    add(event) {
        if (!this.arr.includes(event.target.id)) {
            this.arr.push(event.target.id);
            new Counter(event.target);
        }
    }
}

The only thing left is to add the viewport enter event to all the elements that we want to animate, I did this in the onReady function making use of the multi-element selector.

$w.onReady(function () {
    $w('#text28, #text30')
        .onViewportEnter( event => counterManager.add(event) );
});