-2

I have figured out how to make it start at a certain number and how to smoothly transition to another number, but don't know how to increase number slowly.

The "Your heart has beaten approximately ... times in total" is a good example of what I am trying to achieve.

Link to Odometer

My attempt:

setTimeout(function() {
  odometer.innerText = 456;
}, 1000);
<!-- Odometr includes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/odometer-theme-car.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/odometer.min.js"></script>

<div id="odometer" class="odometer odometer-theme-car">123</div>

2
  • Do you want to increase number by one every second? what do you want to actually achieve? Commented Sep 4, 2017 at 23:39
  • Yes I want to increase the number by one every second Commented Sep 5, 2017 at 0:07

1 Answer 1

2

You need to set 3 separate things: the duration of your animation, in both the JavaScript and CSS, and the value you want to reach.

For example, if you want to count up to ten, that should take ten seconds, per your "one number per second" request.

window.odometerOptions = {
  duration: 1000 // duration in milliseconds
};

setTimeout(function(){
    odometer.innerHTML = 10; // value to reach
}, 1000);

Then, in your CSS, override the styles.

// duration in seconds
.odometer.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition-duration: 10s !important;
    -moz-transition-duration: 10s !important;
    -ms-transition-duration: 10s !important;
    -o-transition-duration: 10s !important;
    transition-duration: 10s !important
}

Change the math accordingly depending on your desired maximum value. If you want to keep counting up indefinitely, look into JavaScript's setInterval() method.

Update

Here's a simple, indefinite implementation.

(function() {

  // set start value
  var currentValue = 0;

  // every second, set odometer value to current value, and count up by one
  setInterval(function() { 

    odometer.innerHTML = currentValue;
    currentValue++;

  }, 1000);

})();
4
  • Can you please edit your answer as so it counts indefinitely, I have next to zero knowledge of Javascript. Thanks for your answer. Commented Sep 6, 2017 at 0:34
  • Hmmm, can't seem to make it work I've put the CSS, HTML, and Javascript on this jsfiddle link (your code is all the way at the bottom) can you try to fix it thanks. Commented Sep 6, 2017 at 19:32
  • You've modified my code. Add it as is, and let me know. Commented Sep 6, 2017 at 20:31
  • Sorry to bug ya one more time but now the CSS transitioning animation is not working. If you want I could post this as another question. Commented Sep 8, 2017 at 0:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.