Popularity
3.2
Growing
Activity
0.0
Declining
821
17
51

Description

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

Code Quality Rank: L5
Programming language: JavaScript
License: MIT License
Tags: Number     Animations     SVG     Library     UI     Effect     Visualization     Animation     Odometer     Motion Blur     jsonrpc     openepr     odoo     Webcomponents    
Latest version: v1.3.0

Odoo alternatives and similar libraries

Based on the "Animations" category.
Alternatively, view Odoo alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Odoo or a related project?

Add another 'Animations' Library

README

SVG library for transitioning numbers with motion blur

npm version 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,
  duration: 3000
});

If you want to control ongoing animation just use methods from returned object:

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.

<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/[email protected]/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](LICENSE) file.


*Note that all licence references and agreements mentioned in the Odoo README section above are relevant to that project's source code only.