Skip to content
Javascript and SVG odometer effect library with motion blur
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Add files via upload Jun 3, 2018
examples fix(#39): remove optimization Nov 20, 2017
lib fix issue #56 Oct 8, 2019
src fix issue #56 Oct 8, 2019
.babelrc Change library to SVG Jul 30, 2016
.editorconfig Initial commit Jul 10, 2016
.eslintrc Initial commit Jul 10, 2016
.gitignore fix: added duration as option Jun 5, 2019
LICENSE Update LICENSE Nov 7, 2017
README.md Update README.md Jul 2, 2018
package.json Bump eslint from 3.19.0 to 4.18.2 Nov 2, 2019
webpack.config.js refactor: chage lib name Nov 14, 2017
yarn.lock Bump eslint from 3.19.0 to 4.18.2 Nov 2, 2019

README.md

SVG library for transitioning numbers with motion blur

npm version Dependencies npm downloads

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.

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);
}

How?

If you're interested how it's made, see the presentation.

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

The library is available under the MIT license. For more info, see the LICENSE file.

You can’t perform that action at this time.