Description
Crazy SVG odometer effect library. Library uses functional approach and ES7 Function Bind Syntax. Internals strongly inspired by d3.js library.
Odoo alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view Odoo alternatives based on common mentions on social networks and blogs.
-
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Odoo or a related project?
Popular Comparisons
README
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:
- [ ]
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](LICENSE) file.
*Note that all licence references and agreements mentioned in the Odoo README section above
are relevant to that project's source code only.