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 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:
-
fromtoAPI. - 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.
17.8k Dec 29, 2022
762 Dec 20, 2022
721 Dec 6, 2022
3.5k Dec 21, 2022
3.5k Dec 23, 2022
227 Dec 31, 2022
256 Sep 19, 2022
33 Dec 28, 2022
5.9k Jan 2, 2023
26.7k Jan 8, 2023
15.5k Jan 8, 2023
7.5k Jan 6, 2023
4 Jan 11, 2022
34 Nov 25, 2022
95 Dec 21, 2022
165 Dec 12, 2022
76.7k Dec 30, 2022
580 Dec 30, 2022