This counter was initialized with the following code:
var myCounter = new flipCounter('flip-counter', {value:10000, inc:123, pace:600, auto:true});
Use the controls below to make changes to the counter using built-in methods.
This slider controls the counter increment by using the setIncrement method:
myCounter.setIncrement(value);
This slider controls the counter pace by using the setPace method:
myCounter.setPace(value);
These buttons start and stop auto-incrementing the counter using the setAuto method:
myCounter.setAuto(false);
When auto-increment is off, you can use the third button to step through the animation one increment at a time using the step method:
myCounter.step();
You can also add and subtract a value to/from the counter using the add and subtract methods:
myCounter.add(567);
myCounter.subtract(567);
You can manually set the value of the counter at any time using the setValue method:
myCounter.setValue(12345);
You can set the counter to increment to a value using the current pace and inc values by using the incrementTo method:
myCounter.incrementTo(12345);
You can also let the counter figure out the best pace and inc values using a "smart" increment technique.
myCounter.incrementTo(12345, 10, 400);
The above code would tell the counter to increment to 12,345 over a period of 10 seconds. I've also set a desired pace of 400 for the animation, but that will change when neccessary to optimize the animation.
Click the "Run smart increment example" button to see a demo of this method in which the counter will increment to 4 different values, each with a duration of 10 seconds, dynamically adjusting pace and inc for optimal results.