Skip to content

Commit 6a34c53

Browse files
authored
Update readme for odometer (#310)
* highlight odometer plugin * readme edits
1 parent 49e46aa commit 6a34c53

File tree

2 files changed

+34
-16
lines changed

2 files changed

+34
-16
lines changed

README.md

+34-16
Original file line numberDiff line numberDiff line change
@@ -11,33 +11,34 @@ Or tinker with CountUp in [Stackblitz](https://stackblitz.com/edit/countup-types
1111

1212
## Jump to:
1313

14-
- **[Features](#features)**
1514
- **[Usage](#usage)**
1615
- **[Including CountUp](#including-countup)**
1716
- **[Contributing](#contributing)**
1817
- **[Creating Animation Plugins](#creating-animation-plugins)**
1918

20-
21-
## CountUp for frameworks and plugins:
22-
23-
- **[CountUp.js with Angular 2+](https://github.com/inorganik/ngx-countUp)**
24-
- **[CountUp.js with Angular 1.x](https://github.com/inorganik/countUp.js-angular1)**
25-
- **[CountUp.js with React](https://gist.github.com/inorganik/2cf776865a4c65c12857027870e9898e)**
26-
- **[CountUp.js with Svelte](https://gist.github.com/inorganik/85a66941ab88cc10c5fa5b26aead5f2a)**
27-
- **[CountUp.js Vue component wrapper](https://github.com/xlsdg/vue-countup-v2)**
28-
- **[CountUp.js WordPress Plugin](https://wordpress.org/plugins/countup-js/)**
29-
- **[CountUp.js with jQuery](https://gist.github.com/inorganik/b63dbe5b3810ff2c0175aee4670a4732)**
30-
31-
3219
## Features
33-
- **Animate when element scrolls into view** - new in v2.1.0. Use option `enableScrollSpy`.
20+
- **Animate when element scrolls into view.** Use option `enableScrollSpy`.
3421
- **Highly customizeable** with a large range of options, you can even substitute numerals.
3522
- **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).
23+
- **Plugins** allow for alternate animations like the [Odometer plugin](https://www.npmjs.com/package/odometer_countup)
24+
![Odomoeter plugin](./demo/images/odometer_plugin.gif)
3625
- **Separate bundles** for modern and legacy browsers, 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.
3726

3827
## Usage:
3928

40-
**On npm** as: `countup.js`. You can import as a module or include the UMD script and access CountUp as a global. See [detailed instructions](#including-countup) below.
29+
**Use CountUp with:**
30+
31+
- [Angular 2+](https://github.com/inorganik/ngx-countUp)
32+
- [Angular 1.x](https://github.com/inorganik/countUp.js-angular1)
33+
- [React](https://gist.github.com/inorganik/2cf776865a4c65c12857027870e9898e)
34+
- [Svelte](https://gist.github.com/inorganik/85a66941ab88cc10c5fa5b26aead5f2a)
35+
- [Vue](https://github.com/xlsdg/vue-countup-v2)
36+
- [WordPress](https://wordpress.org/plugins/countup-js/)
37+
- [jQuery](https://gist.github.com/inorganik/b63dbe5b3810ff2c0175aee4670a4732)
38+
39+
**Use CountUp directly:**
40+
41+
On npm as `countup.js`. You can import as a module, or include the UMD script and access CountUp as a global. See [detailed instructions](#including-countup) on including CountUp.
4142

4243
**Params**:
4344
- `target: string | HTMLElement | HTMLInputElement` - id of html element, input, svg text element, or DOM element reference where counting occurs
@@ -120,7 +121,8 @@ Update the end value and animate:
120121
countUp.update(989);
121122
```
122123

123-
### Animate when the element is scrolled into view
124+
---
125+
### **Animate when the element is scrolled into view**
124126

125127
Use the scroll spy option to animate when the element is scrolled into view. When using scroll spy, just initialize CountUp but do not call start();
126128

@@ -136,6 +138,20 @@ CountUp checks the scroll position as soon as it's initialized. So if you initia
136138
// after DOM has rendered
137139
countUp.handleScroll();
138140
```
141+
---
142+
### **Alternate animations with plugins**
143+
144+
Currently there's just one plugin, the **[Odometer Plugin](https://github.com/msoler75/odometer_countup.js)**.
145+
146+
To use a plugin, use the plugin option:
147+
```js
148+
const countUp = new CountUp('targetId', 5234, {
149+
plugin: new Odometer({ duration: 2.3, lastDigitDelay: 0 }),
150+
duration: 3.0
151+
});
152+
```
153+
If you'd like to make your own plugin, see [the docs](#creating-animation-plugins) below!
154+
139155
---
140156

141157
## Including CountUp
@@ -236,3 +252,5 @@ export class SomePlugin implements CountUpPlugin {
236252
}
237253
}
238254
```
255+
256+
If you make a plugin, be sure to create a PR to add it to this README!

demo/images/odometer_plugin.gif

1.1 MB
Loading

0 commit comments

Comments
 (0)