Odoo: SVG Odometer Effect Library
Crazy SVG odometer effect library. Library uses functional approach and ES7 Function Bind Syntax. Internals strongly inspired by d3.js library.
Examples
The API is really simple and straigthforward:
odoo.default({ el: '.js-odoo', value: '£42,000,000' });
You can use it with other options:
odoo.default({
el: '.js-odoo',
value: '£42,000,000',
lineHeight: 1.35,
letterSpacing: 1,
animationDelay: 100,
letterAnimationDelay: 100
});
If you want to cancel the ongoing animation just call returned function:
const cancel = odoo.default({ el: '.js-odoo', value: '£42,000,000' });
cancel();
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-odoo {
font-size: 60px;
font-family: Roboto;
fill: #fff;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}