https://github.com/coderitual/bounty
Javascript and SVG odometer effect library with motion blur
https://github.com/coderitual/bounty
animation bounty css es6 filters graphics javascript lib odometer prize svg svg-odometer ui webcomponents
Last synced: 6 months ago
JSON representation
Javascript and SVG odometer effect library with motion blur
- Host: GitHub
- URL: https://github.com/coderitual/bounty
- Owner: coderitual
- License: mit
- Created: 2016-07-10T21:04:18.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-02-24T09:37:26.000Z (8 months ago)
- Last Synced: 2025-04-19T02:55:35.476Z (7 months ago)
- Topics: animation, bounty, css, es6, filters, graphics, javascript, lib, odometer, prize, svg, svg-odometer, ui, webcomponents
- Language: JavaScript
- Homepage: https://coderitual.github.io/bounty/examples/
- Size: 7.59 MB
- Stars: 821
- Watchers: 17
- Forks: 51
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - coderitual/bounty - Javascript and SVG odometer effect library with motion blur (JavaScript)
- awesome-web-effect - bounty - Javascript and SVG odometer effect library with motion blur (🚀 A series of exquisite and compact web page cool effects / SVG Animations)
- fucking-awesome-web-effect - bounty - Javascript and SVG odometer effect library with motion blur (🚀 A series of exquisite and compact web page cool effects / SVG Animations)
- awesome-starred - coderitual/bounty - Javascript and SVG odometer effect library with motion blur (javascript)
README
SVG library for transitioning numbers with motion blur
[](https://www.npmjs.com/package/bounty)
[](https://www.npmjs.com/package/bounty)
> JavaScript odometer or slot machine effect library for smoothly transitioning numbers with motion blur. Library uses functional approach and ES7 Function Bind Syntax. Internally based on SVG.
See the **[live version](https://coderitual.github.io/bounty/examples/)**.
## Installation
To install the stable version:
`npm install --save bounty`
## Examples
The API is really simple and straigthforward:
```js
import bounty from `bounty`;
bounty({ el: '.js-bounty', value: '£42,000,000' });
```
You can use it with other **options**:
```js
import bounty from `bounty`;
bounty({
el: '.js-bounty',
value: '£42,000,000',
initialValue: '£900,000',
lineHeight: 1.35,
letterSpacing: 1,
animationDelay: 100,
letterAnimationDelay: 100,
duration: 3000
});
```
If you want to **control** ongoing animation just use methods from returned object:
```js
import bounty from `bounty`;
const { cancel, pause, resume } = bounty({ el: '.js-bounty', value: '£42,000,000' });
const wait = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
const pasueAndRun = async () => {
await wait(1500);
pause();
await wait(2000);
resume();
await wait(2000);
cancel();
};
pasueAndRun();
```
Library is built using UMD thus the following usage in HTML is possible.
```html
bounty.default({ el: ".js-bounty", value: "£42,000,000" });
```
The UMD build is also available on unpkg:
```html
```
You can find the library on `window.bounty`.
## That's it?
Yea! That's it. Other options like `font-family` and `font-size` are taken from **computed styles** so you can just style it like the other layers.
```css
.js-bounty {
font-size: 60px;
font-family: Roboto;
fill: #fff;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
```
## How?
If you're interested how it's made, see the **[presentation](http://slides.com/coderitual/odoo-js)**.
## Roadmap
There is a work in progress to implement additional features:
- [ ] `from` `to` API.
- [ ] Full ASCII transition support.
- [ ] Control animation.
- [ ] Introduce Webcomponents API ``
## License
The library is available under the MIT license. For more info, see the [LICENSE](LICENSE) file.