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: about 2 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 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-10T18:01:56.000Z (9 months ago)
• Last Synced: 2024-10-01T03:01:22.287Z (2 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.74 MB
• Stars: 819
• Watchers: 18
• Forks: 51
• Open Issues: 17
• 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-starred - 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)

README

        


  



SVG library for transitioning numbers with motion blur


[![npm version](https://badge.fury.io/js/bounty.svg)](https://www.npmjs.com/package/bounty)

[![npm downloads](https://img.shields.io/npm/dt/bounty.svg?maxAge=2592000)](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.