bounty

Crazy SVG odometer effect library. Library uses functional approach and ES7 Function Bind Syntax. Internals strongly inspired by d3.js library.

See the live version

Installation

To install the stable version:

npm install --save bounty

Examples

The API is really simple and straigthforward:

import bounty from `bounty`;

bounty({ el: '.js-bounty', value: '£42,000,000' });

You can use it with other options:

import bounty from `bounty`;

bounty({
  el: '.js-bounty',
  value: '£42,000,000',
  initialValue: '£900,000',
  lineHeight: 1.35,
  letterSpacing: 1,
  animationDelay: 100,
  letterAnimationDelay: 100
});

If you want to cancel the ongoing animation just call returned function:

import bounty from `bounty`;

const cancel = bounty({ el: '.js-bounty', value: '£42,000,000' });
cancel();

Library is built using UMD thus the following usage in HTML is possible.

<div class="js-bounty"></div>
<script src="/bounty.js"></script>
<script>
  bounty.default({ el: '.js-bounty', value: '£42,000,000' })
</script>

The UMD build is also available on unpkg:

<script src="https://unpkg.com/bounty@1.1.6/lib/bounty.js"></script>

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.

.js-bounty {
  font-size: 60px;
  font-family: Roboto;
  fill: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

Roadmap

There is a work in progress to implement additional features:

from to API.
Full ASCII transition support.
Control animation.
Introduce Webcomponents API <svg-bounty>

License