ac73463c308b1b3639f6fca2cb38227af326eeecbdc4e25aeb364e34534aa9027ee7d26dd55f81f4fa85f707e6f67a5eb49d07f90685076c661bcef5409153 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. # CountUp.js
  2. CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.
  3. Despite its name, CountUp can count in either direction, depending on the `startVal` and `endVal` params that you pass.
  4. CountUp.js supports all browsers.
  5. ## [Try the demo](http://inorganik.github.io/countUp.js)
  6. ## Please note
  7. _Angular 1 and 2 modules used to be part of this repo_. **As of v1.9.0, they have moved.** See links below.
  8. ## See Also
  9. - **[CountUp.js Angular 1.x Module](https://github.com/inorganik/countUp.js-angular1)**
  10. - **[CountUp.js Angular ^2 Module](https://github.com/inorganik/countUp.js-angular2)**
  11. - **[CountUp.js React](https://github.com/glennreyes/react-countup)**
  12. - **[CountUp.js Vue component wrapper](https://github.com/xlsdg/vue-countup-v2?ref=madewithvuejs.com)**
  13. - **[CountUp.js WordPress Plugin](https://wordpress.org/plugins/countup-js/)**
  14. ## Installation
  15. Simply include the countUp.js file in your project or install via npm or bower using the package name `countup.js` or `countUp.js` respectively.
  16. Before making a pull request, please [read this](#contributing). MIT License.
  17. A jQuery version is also included in case you like dollar signs.
  18. ## Usage:
  19. Params:
  20. - `target` = id of html element, input, svg text element, or var of previously selected element/input where counting occurs
  21. - `startVal` = the value you want to begin at
  22. - `endVal` = the value you want to arrive at
  23. - `decimals` = (optional) number of decimal places in number, default 0
  24. - `duration` = (optional) duration in seconds, default 2
  25. - `options` = (optional, see demo) formatting/easing options object
  26. Decimals, duration, and options can be left out to use the default values.
  27. ```js
  28. var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99);
  29. if (!numAnim.error) {
  30. numAnim.start();
  31. } else {
  32. console.error(numAnim.error);
  33. }
  34. ```
  35. with optional callback:
  36. ```js
  37. numAnim.start(someMethodToCallOnComplete);
  38. // or an anonymous function
  39. numAnim.start(function() {
  40. // do something
  41. })
  42. ```
  43. #### Other methods:
  44. Toggle pause/resume:
  45. ```js
  46. numAnim.pauseResume();
  47. ```
  48. Reset an animation:
  49. ```js
  50. numAnim.reset();
  51. ```
  52. Update the end value and animate:
  53. ```js
  54. var someValue = 1337;
  55. numAnim.update(someValue);
  56. ```
  57. #### Animating to large numbers
  58. For large numbers, since CountUp has a long way to go in just a few seconds, the animation seems to abruptly stop. The solution is to subtract 100 from your `endVal`, then use the callback to invoke the `update` method which completes the animation with the same duration with a difference of only 100 to animate:
  59. ```js
  60. var endVal = 9645.72;
  61. var numAnim = new CountUp("targetElem", 0, endVal - 100, 2, duration/2);
  62. numAnim.start(function() {
  63. numAnim.update(endVal);
  64. });
  65. ```
  66. ## Contributing <a name="contributing"></a>
  67. Before you make a pull request, please be sure to follow these super simple instructions:
  68. 1. Do your work on `countUp.js` and/or other files in the root directory.
  69. 2. In Terminal, `cd` to the `countUp.js` directory.
  70. 3. Run `npm install`, which installs gulp and its dependencies.
  71. 4. Run `gulp`, which copies and minifies the .js files to the `dist` folder.