Odometer effects

The odometer is a custom embed that adds a count-up or count-down effet to numbers. When a reader scrolls past it, the numbers spin from a start to target number for dramatic effect.

Example: Bad adoptions (config)

Configuration

The odometer component is a storytelling embed, so it requires a slightly different configuration than most components.

First, it must use the storytellingEmbed:. Second, there are two versions of the embed, full.html and small.html. The full embed includes the necessary CSS and JavaScript assets; small includes only HTML.

Here's a full embed:

{assets.8240504001}
storytellingEmbed: odometer/embed/full.html
start: 900
number: 491
duration: 2000
template: {} days to closure
tag: h2
{}

And a small embed:

{assets.8291745001}
storytellingEmbed: odometer/embed/small.html
start: 491
number: 418
duration: 2000
template: {} days to closure
tag: h2
{}

Generally, the full embed should be the first odometer in a story to ensure assets are loaded. Subsequent odometers need only use the small version.

Options

Key	Purpose	Default
start	initial value	0
number	target value	0
duration	time to transition betweeen start and number, in milliseconds	3000
template	text template, see below	{}
tag	wrapping element, see templating below	p

Templating

If you use only the start, number and duration options, the odometer will display as a number wrapped in a paragraph (<p>) tag.

To include more text around the animating number, or to use it as a subhead, use the template and tag options.

The template is a text string with exactly one placeholder: {}. That placeholder will be replaced with a <span> tag where the odometer gets inserted.

Tag can be one of the following: p, h2, h3, h4. Any other tags will be ignored, and a p tag will be used.

Distributed platform appearance

Like most components, the odometer needs to replace an asset or subhead, and that underlying asset will show on distributed platforms. Consider using fallback text or writing the story so that the odometer is purely additive.