Duration - what exactly is it doing?

[steve-rhodes]

I've set three different odometers on my page with different duration values, yet they all take exactly the same time to change to new values. Am I missing here something?

I thought one can set how long (in ms) it take to go to the new value, no?

thanks

[adamschwartz]

I apologize for this not being made very clear in the docs. Currently, to change the duration of the animation, you need to change it in two places. As stated in the docs:

Specifically:

duration: 3000, // Change how long the javascript expects the CSS animation to take

So the duration you set there is used by the JS in determining various timing things it coordinates with the JS. I imagine it might be possible to do this with transition events, but this hasn’t been attempted yet in Odometer afaik.

To make the change In the sass and compile your own new themes, you could replace the 2s values here and here.

To simply override the transition durations with your own separate CSS, try adding something like this:

.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
}

[steve-rhodes]

thanks. I still don't understand! :)

"Change how long the javascript expects the CSS animation to take" & "So the duration you set there is used by the JS in determining various timing things it coordinates with the JS. " is very vague. What exactly does it mean? And why do I need to change in two places?

I don't get it, sorry! I thought there is an option that determines how long the animation takes from the original value to the next value, no?

Do you mean both of these values need to be the same?

I copied

.odometer.odometer-animating-up, .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
}

into my CSS and it had no effect at all.

BTW, I have three different odometers that I initialised with three different id's.

 var el = document.querySelector('#btodometer');
            od = new Odometer({
                el: el,
                format: '(,ddd)',
                value: 0,
                minIntegerLen: 6,
                duration: 5000
            });

            var el = document.querySelector('#btodometerS');
            od = new Odometer({
                el: el,
                format: '(,ddd)',
                value: 0,
                minIntegerLen: 2,
                duration: 1000
            });

            var el = document.querySelector('#btodometer3');
            od = new Odometer({
                el: el,
                format: '(,ddd)',
                value: 0,
                minIntegerLen: 6,
                duration: 10000
            });

Do I need to target these id's in the CSS from you? Thanks!

[adamschwartz]

The duration value is used by the JS to calculate, among other things, the maximum number of digits to render in the sliding animation based on what is perceptible at the desired display frame rate.

With some effort, Odometer could be improved such that these duration values could be specified in only place, for example as a data- attribute on the root Odometer element. However, this has not yet been attempted.

I’d be happy to help with the issue you’re having. But it’s hard for me to debug without a little more context. Could you provide a link to the page in question or include the full source text (including all scripts and styles) of the page? Thanks.

[edent]

What I'm trying to do (and I assume @theother1 is also) is make the total animation take 10 seconds.

For example - start the counter at 0000 and, after 10 seconds, show 0123.

Ideally, I want to make a ticker which over the course of an hour increments towards 1 million. Is this possible?

[steve-rhodes]

my idea is to get the animation time in line with the interval of the updates. Let's say I update the values every minute (or two minutes like in my case), then it would be cool to have an animation that takes exactly 1 or two minutes. That way the counter moves continuously without stopping (assuming every minute there is a new value. Depending if the changes are large or small, the odometer would move very slow or fast.

[michaelzg]

I was also curious as to how to slow down and control the increment speed (and the scrolling of values). I found the parameter FRAMES_PER_VALUE within odometer.js to be essential in slowing down the interval of updates, higher the slower.

Now to control the step value and the time it takes to increment to that value, I played with the STEP and LAG as shown below. This was adapted from the example odometer in the docs.

<div class="odometer odometer-example" id = "odometer"> </div>
<script>
var START = 1000;
var STEP = 500;
var LAG = 3000; 

var exampleOdometerValue = START;
var exampleOdometer = new Odometer({ el: $('.odometer-example')[0], theme: 'car', value: exampleOdometerValue });
exampleOdometer.render()
setInterval(function(){
  exampleOdometer.update(exampleOdometerValue+=STEP);
}, LAG);
</script>

[richmolj]

Confirmed the suggested CSS has no effect.

[adamschwartz]

@edent I’ve created an example which counts from 000 to 123 in 10 seconds just as you requested. Here’s that: jsFiddle.

@michaelzg I believe the idea behind FRAMES_PER_VALUE is that since the computer is only rendering 60fps (in the best case), each frame will last about ~16.67ms, so it can be advantageous to performance to drop digits which would have not appeared anyway. @zackbloom was the author of the JS so he may have a better answer for you though. At any rate. there is no need to adjust it to change the increment speed, as you put it.

@richmolj Please take a look at the CSS in this jsFiddle. Mimic that (changing everywhere “minimal” occurs with the theme you’re using), and you should be all set. I think my CSS example above was just meant to be an example of the selector which needs to have transition-duration changed, not a complete example (since that would depend on the specific theme). I’m sorry for the confusion that may have caused.

[KoltonG]

@adamschwartz is it possible to do the example that @edent had where you can have a 0 prefix on the odometer. So it would start with 0000 and that would become 0123 with the 0 still there while and after the transition animation?

[adamschwartz]

@KoltonG Here’s a trick you can use to do that. First, animate from 10000 to 10123 instead of 0 to 123. Then add this CSS:

.odometer-inside > .odometer-digit:nth-last-child(5) {
    display: none
}

(If you have a formatting comma in there you would need to change it to :nth-last-child(6), etc. You could also do .odometer-inside > .odometer-digit:first-child if that makes more sense to you.)

[KoltonG]

@adamschwartz That sounds awesome! I'll give it a try and let you know. If I'd also want to have it like $00123, how would I place the $ in there?

[adamschwartz]

Sweet!

With regards to adding “$” before the numbers, see https://github.com/HubSpot/odometer/issues/100#issuecomment-128456783 or https://github.com/HubSpot/odometer/issues/81#issuecomment-137844322. (Seems I failed at being DRY. At least I’m consistent! lol)

[KoltonG]

@adamschwartz won't adding

 .odometer .odometer-inside:before {
    content: "$"
}

add the $ in front on the 100123, and when hiding the 1 to make it look like 00123 take off the $ that was in front?

[adamschwartz]

Try it :wink:

The reason it doesn’t is because a pseudo-element isn’t considered a child element as far as nth-child selectors are concerned. Check out https://github.com/HubSpot/odometer/issues/106 for an example implementation.

[alycda]

I'd like to re-open this issue. In my case, I want to set the duration via JS, so that multiple odometers are staggered. For example, I have 4 on the page and I want the first odometer to take 3 seconds to finish, then the next one 4.5 seconds, the third 6 seconds, and so on.

[jack-guy]

Just throwing this out there - in the interest of clarity why not just adjust the CSS for the odometer element based on the duration set in the options? CSS !important overrides make me sad. :(

[bhamde]

Just FYI regarding older comments above, the CSS mentioned is just missing a class, that's why it was not working.

This worked for me:

.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
}

[adamschwartz]

Thanks @bhamde. Updated mine.