Javascript and SVG odometer effect library with motion blur

Overview

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,
  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 file.

Comments
  • The Error in the Console

    The Error in the Console

    I get this error: odoo.js:1 Uncaught TypeError: Cannot read property 'setAttribute' of null at e.default (http://localhost:9001/js/plugins/odoo.js:1:5038) at step (http://localhost:9001/js/plugins/odoo.js:1:4271) at Object.b as update at http://localhost:9001/js/plugins/odoo.js:1:4622 at Array.forEach (native) at q (http://localhost:9001/js/plugins/odoo.js:1:4593) at a (http://localhost:9001/js/plugins/odoo.js:1:803) image

    opened by eqaderi 18
  • Letter spacing and text-shadow on Chrome/Firefox

    Letter spacing and text-shadow on Chrome/Firefox

    Hi, I've noted that there are some differences between Firefox and Chrome:

    CHROME: chrome

    FIREFOX: firefox

    I've set:

    • text-shadow: 3px 3px 11px rgba(255, 0, 0, 1);
    • letterSpacing: 10

    As you can see, the shadow is cropped on non-digits characters (€) on Chrome only and on the last character on both Firefox and Chrome. Is there a way to have the same behavior between browsers and between letters and digits?

    Thanks! Francesco

    bug 
    opened by francesco-incomedia 13
  • "initialValue" to "value" does't work well on Firefox

    Hi, I've noticed that if you use "initialValue" option on Firefox, sometimes some digits disappears. Here a test:

    https://codepen.io/anon/pen/ZROMgd

    bounty.default({ el: '.js-bounty', value: '£40,000,000', initialValue: '£10,000,000' })

    The "4" of "£40,000,000" disappears at the end of the animation.

    bug 
    opened by francesco-incomedia 8
  • Problem with more than 2 odometers!

    Problem with more than 2 odometers!

    Hi, I've craeted a Pen on codepen.io; here it is: http://codepen.io/ershad989/pen/WGwjqj

    As you can see I've defined 3 odometers but only of them shows up!! The other problem is that if one of the numbers has 3 digits and the other one has 4 or more digits only 3 of them is visible!!

    So here we have three numbers, 1st one has 3 digits, 2nd one has 4 digits and the 3rd one has 5 digits. when I run the function only three digits shows up for just two of the numbers.

    How can I solve this problem?

    bug 
    opened by eqaderi 5
  • API is not enough flexible

    API is not enough flexible

    API could be more flexible in terms of README.md example:

    odoo.default({ el: '.js-odoo', value: '£42,000,000' });
    

    odoo could just return newly created node with SVG instead of mounting it directly to global DOM, so you could use it for example in node.js env. Also, there could be an additional helper to preserve previous functionality.

    example

    const text = odoo.default({value: '£42,000,000'});
    document.querySelector('.js-odoo').appendChild(text);
    
    enhancement 
    opened by kkwiatkowski 5
  • SVG Attribute heights

    SVG Attribute heights

    Hi there!

    Love Bounty, It's fantastic, I do have a small issue though that I hope you can help with?

    I'm trying to run an instance of Bounty in a h1 with position absolute but everytime I run it it kicks out such errors as:

    Error: <svg> attribute height: A negative value is not valid. ("-20")
    

    And by kick out I mean a lot of errors!

    I'm trying to run it as follows but it won't initialise. I have bounty elsewhere running fine so I'm wondering if it's to do with the size and positioning of the target element? (Do I need to put it in a child)?

    bounty.default({
    					el: 'h1.Raised',
    					value: '£123,456.00',
    					lineHeight: 0,
    				});
    

    Thanks!

    opened by genericmilk 4
  • Strange kerning effect

    Strange kerning effect

    When using proportional font style, displayed number has a strange kerning effect (especially "1" between other chars), because each digit is left aligned in each roulette.

    I think that aligning them to center of the roulette should improve look & feel.

    bug 
    opened by bartpat 4
  • Support for es6 imports

    Support for es6 imports

    opened by kkwiatkowski 4
  • Text rendering in Chrome

    Text rendering in Chrome

    Hi, I've noticed that on Chrome text has a strange grey border. It appears on smaller font size and seems to disappears if you zoom the browser page. This doesn't happens on all PCs.

    Here the comparison between Firefox and Chrome:

    senza nome

    bug 
    opened by francesco-incomedia 3
  • Eplorer compatibility

    Eplorer compatibility

    Hi, is there a way to have Internet Explorer compatibility?

    On IE 11 there is the following JS error:

    SCRIPT438: Object doesn't support property or method 'from'
    bounty.js (1,824)
    

    Thanks

    opened by francesco-incomedia 3
  • Duration doesn't seem to work

    Duration doesn't seem to work

    bounty({
      el: '.number',
      value: 1e6,
      duration: 10e3,
      animationDelay: 3e3,
      letterAnimationDelay: 500
    });
    

    When animation starts, it lasts 3 seconds (as by default). It doesn't seem that duration option works. Tested in Chrome.

    opened by JordanFoxy 2
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.4.0 to 6.4.1

    Bump qs from 6.4.0 to 6.4.1

    Bumps qs from 6.4.0 to 6.4.1.

    Changelog

    Sourced from qs's changelog.

    6.4.1

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] use safer-buffer instead of Buffer constructor
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 486aa46 v6.4.1
    • 727ef5d [Fix] parse: ignore __proto__ keys (#428)
    • cd1874e [Robustness] stringify: avoid relying on a global undefined (#427)
    • 45e987c [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 90a3bce [meta] fix README.md (#399)
    • 9566d25 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 74227ef Clean up license text so it’s properly detected as BSD-3-Clause
    • 35dfb22 [actions] backport actions from main
    • 7d4670f [Dev Deps] backport from main
    • 0485440 [Fix] use safer-buffer instead of Buffer constructor
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Letter Spacing doesn't seem to work

    Letter Spacing doesn't seem to work

    Hello,

    Great tool you built here! I'm currently having a problem with styling the letter spacing. I can style anything else easily: font-family, font-size, etc. But, letter-spacing values don't affect the output at all: 3, -10px, normal. Any help would be appreciated. Please let me know if you need any more details. Thanks!

    enhancement 
    opened by lllNuggetslll 0
  • Accessibility

    Accessibility

    Hi, I was looking for a library like this and test it out.

    I found out, it doesn't handle screen readers. NVDA with Windows would announce the following text for the basic example:

    bounty
    £  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  ,  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  .  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0
    

    Possible solution for this:

    • add aria-hidden="true" to the inner <svg mask="..."> or wrap all in a single <g aria-hidden="true"> to hide the loose <text>s for screen readers
    • add the example case add a <desc>£144,167.60</desc> to the outer SVG to announce the correct text to screen readers

    For my project I have to hide the generated SVG for screen readers and show them the correct text.

    opened by vaxul 1
Releases(v1.1.0)
Owner
Mike Skowronek
Making user interfaces
Mike Skowronek
❄️ Add a live frosted glass blur effect over any type of web content, including text.

Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save

Adrian Carriger 63 Nov 10, 2022
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Codrops 112 Jul 27, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
A speedy motion transition effect for an image slideshow.

Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits

Codrops 51 Jul 5, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Codrops 33 Sep 23, 2022
Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Mark Rolich 808 Dec 18, 2022
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 96 Dec 24, 2022
🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look

Ramotion 1.8k Dec 9, 2022
Lazy Line Painter - A Modern JS library for SVG path animation

Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett

Cam O'Connell 1.9k Jan 3, 2023
Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Ciaran Walsh 1.8k Dec 21, 2022
⌨️ A tiny library for creating a typing effect on specified text element.

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst

Korney Vasilchenko 175 Sep 29, 2021
Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to

Alan Ktquez 89 Sep 20, 2022
Create cool animated SVG spinners, loaders and other looped animations in seconds

SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG

Alex Kaul 301 Dec 24, 2022
A simple yet powerful native javascript plugin for a cool typewriter effect.

TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. <script src="htt

Tameem Safi 1.8k Jan 4, 2023
:keyboard: Simulate a typewriter effect in vanilla JavaScript.

malarkey Simulate a typewriter effect in vanilla JavaScript. Flexible API allowing granular control Option to repeat the sequence indefinitely Allows

Yuan Qing Lim 237 Nov 18, 2022
Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

/** * DHTML Snowstorm! JavaScript-based Snow for web pages * -------------------------------------------------------- * Version 1.44.20131208 (Prev

Scott Schiller 518 Dec 24, 2022
Small but good javascript smoke effect 🌬💨

Demo You can play with a live demo here → Installation Basic Copy the smoke.js file into your project and use it with a script tag: <script src="smoke

Guillermo Webster 239 Dec 28, 2022