-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Jamie Perkins
committed
Feb 21, 2019
1 parent
ab40ea9
commit 7ab45a3
Showing
13 changed files
with
158 additions
and
312 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,109 @@ | ||
| # CountUp.js | ||
| 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. | ||
| 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. | ||
|
|
||
| Despite its name, CountUp can count in either direction, depending on the `startVal` and `endVal` params that you pass. | ||
| Despite its name, CountUp can count in either direction, depending on the start value and end value that you pass. | ||
|
|
||
| CountUp.js supports all browsers. | ||
| CountUp.js supports all browsers. MIT license. | ||
|
|
||
| ## [Try the demo](http://inorganik.github.io/countUp.js) | ||
|
|
||
| ## New in 2.0.0 | ||
|
|
||
| - Completely rewritten in **Typescript**! The distributed code is still Javascript. | ||
| - **New** cleaner [method signature](#example). | ||
| - Tests with **Jest**. As much code coverage as possible mocking requestAnimationFrame. | ||
| - **Smart easing**: CountUp intelligently defers easing until it gets close enough to the end value for easing to be visually noticeable. Configureable in the [options](#options). | ||
| - **Separate bundles** for with and without the requestAnimationFrame polyfill. Choose `countUp.min.js` for modern browsers or `countUp.withPolyfill.min.js` for IE9 and older, and Opera mini. | ||
|
|
||
| ## See Also | ||
|
|
||
| - **[CountUp.js Angular ^2 Module](https://github.com/inorganik/countUp.js-angular2)**  | ||
| - **[CountUp.js Angular ^2 Module](https://github.com/inorganik/countUp.js-angular2)** | ||
| - **[CountUp.js Angular 1.x Module](https://github.com/inorganik/countUp.js-angular1)** | ||
| - **[CountUp.js React](https://github.com/glennreyes/react-countup)** | ||
| - **[CountUp.js Vue component wrapper](https://github.com/xlsdg/vue-countup-v2)** | ||
| - **[CountUp.js WordPress Plugin](https://wordpress.org/plugins/countup-js/)** | ||
|
|
||
| ## Installation | ||
|
|
||
| Simply include the countUp.js file in your project or install via npm/yarn using the package name `countup.js`. | ||
|
|
||
| Before making a pull request, please [read this](#contributing). MIT License. | ||
|
|
||
| A jQuery version is also included, but needs to be included manually. | ||
| - **[CountUp.js jQuery Plugin](https://gist.github.com/inorganik/b63dbe5b3810ff2c0175aee4670a4732)** | ||
|
|
||
| ## Usage: | ||
| Params: | ||
| - `target` = id of html element, input, svg text element, or var of previously selected element/input where counting occurs | ||
| - `startVal` = the value you want to begin at | ||
| - `endVal` = the value you want to arrive at | ||
| - `decimals` = (optional) number of decimal places in number, default 0 | ||
| - `duration` = (optional) duration in seconds, default 2 | ||
| - `options` = (optional, see demo) formatting/easing options object | ||
|
|
||
| Decimals, duration, and options can be left out to use the default values. | ||
| **On npm**: `countup.js` | ||
|
|
||
| **Params**: | ||
| - `target: string | HTMLElement | HTMLInputElement` - id of html element, input, svg text element, or DOM element reference where counting occurs | ||
| - `endVal: number` - the value you want to arrive at | ||
| - `options?: CountUpOptions` - optional configuration object for fine-grain control | ||
|
|
||
| **Options** (defaults in parentheses): <a name="options"></a> | ||
|
|
||
| ```ts | ||
| interface CountUpOptions { | ||
| startVal?: number; // number to start at (0) | ||
| decimalPlaces?: number; // number of decimal places (0) | ||
| duration?: number; // animation duration in seconds (2) | ||
| useGrouping?: boolean; // example: 1,000 vs 1000 (true) | ||
| useEasing?: boolean; // ease animation (true) | ||
| smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999) | ||
| smartEasingAmount?: number; // amount to be eased for numbers above threshold (333) | ||
| separator?: string; // grouping separator (',') | ||
| decimal?: string; // decimal ('.') | ||
| // easingFn: easing function for animation (easeOutExpo) | ||
| easingFn?: (t: number, b: number, c: number, d: number) => number; | ||
| formattingFn?: (n: number) => string; // this function formats result | ||
| prefix?: string; // text prepended to result | ||
| suffix?: string; // text appended to result | ||
| numerals?: string[]; // numeral glyph substitution | ||
| } | ||
| ``` | ||
|
|
||
| **Example usage**: <a name="example"></a> | ||
|
|
||
| ```js | ||
| var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99); | ||
| if (!numAnim.error) { | ||
| numAnim.start(); | ||
| const countUp = new CountUp('targetId', 5234); | ||
| if (!countUp.error) { | ||
| countUp.start(); | ||
| } else { | ||
| console.error(numAnim.error); | ||
| console.error(countUp.error); | ||
| } | ||
| ``` | ||
|
|
||
| Pass options: | ||
| ```js | ||
| const countUp = new CountUp('targetId', 5234, options); | ||
| ``` | ||
|
|
||
| with optional callback: | ||
|
|
||
| ```js | ||
| numAnim.start(someMethodToCallOnComplete); | ||
| countUp.start(someMethodToCallOnComplete); | ||
|
|
||
| // or an anonymous function | ||
| numAnim.start(function() { | ||
| // do something | ||
| }) | ||
| countUp.start(() => console.log('Complete!')); | ||
| ``` | ||
|
|
||
| #### Other methods: | ||
| **Other methods**: | ||
|
|
||
| Toggle pause/resume: | ||
|
|
||
| ```js | ||
| numAnim.pauseResume(); | ||
| countUp.pauseResume(); | ||
| ``` | ||
|
|
||
| Reset an animation: | ||
| Reset the animation: | ||
|
|
||
| ```js | ||
| numAnim.reset(); | ||
| countUp.reset(); | ||
| ``` | ||
|
|
||
| Update the end value and animate: | ||
|
|
||
| ```js | ||
| var someValue = 1337; | ||
| numAnim.update(someValue); | ||
| ``` | ||
|
|
||
| #### Animating to large numbers | ||
| 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: | ||
| ```js | ||
| var endVal = 9645.72; | ||
| var numAnim = new CountUp('targetElem', 0, endVal - 100, 2, duration/2); | ||
| numAnim.start(function() { | ||
| numAnim.update(endVal); | ||
| }); | ||
| countUp.update(989); | ||
| ``` | ||
|
|
||
| ## Contributing <a name="contributing"></a> | ||
|
|
||
| Before you make a pull request, please be sure to follow these instructions: | ||
|
|
||
| 1. Do your work on `countUp.js` and/or other files in the root directory. | ||
| 2. In Terminal, `cd` to the `countUp.js` directory. | ||
| 3. Run `npm i` | ||
| 4. Run `npm run build`, which copies and minifies the .js files to the `dist` folder. | ||
| 1. Do your work on `src/countUp.ts` | ||
| 1. Test your work. Do manual tests on the demo in the browser and run `npm t` | ||
| 1. Run `npm run build`, which copies and minifies the .js files to the `dist` folder. |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| export interface CountUpOptions { | ||
| startVal?: number; | ||
| decimalPlaces?: number; | ||
| duration?: number; | ||
| useGrouping?: boolean; | ||
| useEasing?: boolean; | ||
| smartEasingThreshold?: number; | ||
| smartEasingAmount?: number; | ||
| separator?: string; | ||
| decimal?: string; | ||
| easingFn?: (t: number, b: number, c: number, d: number) => number; | ||
| formattingFn?: (n: number) => string; | ||
| prefix?: string; | ||
| suffix?: string; | ||
| numerals?: string[]; | ||
| } | ||
| export declare class CountUp { | ||
| private target; | ||
| private endVal; | ||
| private options?; | ||
| version: string; | ||
| private defaults; | ||
| private el; | ||
| private rAF; | ||
| private startTime; | ||
| private decimalMult; | ||
| private remaining; | ||
| private finalEndVal; | ||
| private useEasing; | ||
| private countDown; | ||
| formattingFn: (num: number) => string; | ||
| easingFn?: (t: number, b: number, c: number, d: number) => number; | ||
| callback: (args?: any) => any; | ||
| error: string; | ||
| startVal: number; | ||
| duration: number; | ||
| paused: boolean; | ||
| frameVal: number; | ||
| constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions); | ||
| private determineDirectionAndSmartEasing; | ||
| start(callback?: (args?: any) => any): void; | ||
| pauseResume(): void; | ||
| reset(): void; | ||
| update(newEndVal: any): void; | ||
| count: (timestamp: number) => void; | ||
| printValue(val: number): void; | ||
| ensureNumber(n: any): boolean; | ||
| validateValue(value: number): number; | ||
| private resetDuration; | ||
| formatNumber: (num: number) => string; | ||
| easeOutExpo: (t: number, b: number, c: number, d: number) => number; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.