Non-linear “animation” of numeric value with JavaScript/jQuery

Question

I want to make an animation like this one in Google Analytics on active users.

---

I saw

Answer 1

I would use jQuery's built-in animation for this.

If you pass a function to the step option for .animate(), it will be fired for each tick during animation. That way, jQuery will handle all of the easing and what not for you. You just need to handle the data.

$({countValue:0}).animate(
    {countValue:346},
    {
        duration: 5000, /* time for animation in milliseconds */
        step: function (value) { /* fired every "frame" */
            console.log(value);
        }
    }
);

In the console, you will see values between 0 and 346, complete with easing.