SVG Based Odometer Motion Blur Effect – bounty.js

Category: Animation , Javascript | October 9, 2019
Author: coderitual
Views Total: 1,987
Official Page: Go to website
Last Update: October 9, 2019
License: MIT

Preview:

SVG Based Odometer Motion Blur Effect – bounty.js

Description:

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

Changelog:

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

You Might Be Interested In:


Leave a Reply