Inline Counter Block #311
Description
User story
As a marketeer,
I want to add animated counters to the website,
to impress visitors with our numbers.
Requirements
- Component should accept a numeric value.
- Component should be injectable in a text field (Inline Block).
- Value is animated from 0 to its actual value in a given time (configurable with default?).
- Value is automatically formatted in the active locale with correct decimal and grouping separators.
- Numbers within the value don't shift left/right while animating (use
tabular-nums). - Content around the component doesn't shift while animating (reserve space of eventual value).
- Value only animates when it's in view.
- Value only animates when user is okay with animations.
Notes
Component could also be (re)used to compose other types of content blocks with more specific features like a prefix, suffix, title, text, etc. These features don't need to be in the core counter component.
References
- Counter PoC by @jbmoelker
- Fudura tip by @milailijevic:
