forked from Agusioma/animated-counter-javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs-anim.js
49 lines (30 loc) · 1.34 KB
/
js-anim.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function animate(obj, initVal, lastVal, duration) {
let startTime = null;
//get the current timestamp and assign it to the currentTime variable
let currentTime = Date.now();
//pass the current timestamp to the step function
const step = (currentTime ) => {
//if the start time is null, assign the current time to startTime
if (!startTime) {
startTime = currentTime ;
}
//calculate the value to be used in calculating the number to be displayed
const progress = Math.min((currentTime - startTime) / duration, 1);
//calculate what to be displayed using the value gotten above
obj.innerHTML = Math.floor(progress * (lastVal - initVal) + initVal);
//checking to make sure the counter does not exceed the last value(lastVal)
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
//start animating
window.requestAnimationFrame(step);
}
let text1 = document.getElementById('0101');
let text2 = document.getElementById('0102');
let text3 = document.getElementById('0103');
const load = () =>{
animate(text1, 0, 907, 5000);
animate(text2, 0, 432, 5000);
animate(text3, 100, 12, 5000);
}