SVG Based Odometer Motion Blur Effect – bounty.js

The bounty.js library lets you create Odometer-style text rolling animation with a motion blur effect using SVG.

How to use it:

Install and import the bounty.js into your project.

# NPM
$ npm install bounty --save

import bounty from `bounty`;

Or insert the ‘bounty.js’ script directly.

<script src="lib/bounty.js"></script>

Create a container element like this:

<div class="js-bounty"></div>

Initialize the bounty.js and set the value.

bounty.default({ 
  el: '.js-bounty', 
  value: '$12,345,678' 
})

More options to config the animation.

bounty.default({ 
  // initial value
  initialValue: null,
  // line height
  lineHeight: 1.35,
  // letter spacing
  letterSpacing: 1,
  // animation delay
  animationDelay: 100,
  // animation delay of letter
  letterAnimationDelay: 100
  
})

You are also allowed to control ongoing animation as follows:

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

Changelog:

03/24/2023

• add restart function

07/27/2020

• Add pause and resume

10/09/2019

• fixed Text rendering in Chrome

07/09/2018

• removed createShadowFailFilter to solve text-shadow issue on

06/24/2018

• convert motion filter value to keep only 1 decimal