Repository files navigation

SVG library for transitioning numbers with motion blur

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 thelive version.

To install the stable version:

npm install --save bounty

The API is really simple and straigthforward:

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

You can use it with otheroptions:

importbountyfrom`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 tocontrol ongoing animation just use methods from returned object:

importbountyfrom`bounty`;const{ cancel, pause, resume}=bounty({el:'.js-bounty',value:'£42,000,000'});constwait=(delay)=>newPromise((resolve)=>setTimeout(resolve,delay));constpasueAndRun=async()=>{awaitwait(1500);pause();awaitwait(2000);resume();awaitwait(2000);cancel();};pasueAndRun();

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

<divclass="js-bounty"></div><scriptsrc="/bounty.js"></script><script>bounty.default({el:".js-bounty",value:"£42,000,000"});</script>

The UMD build is also available on unpkg:

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

You can find the library onwindow.bounty.

Yea! That's it. Other options likefont-family andfont-size are taken fromcomputed styles so you can just style it like the other layers.

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

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

There is a work in progress to implement additional features:

• fromto API.
• Full ASCII transition support.
• Control animation.
• Introduce Webcomponents API<svg-bounty>

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