Odometer Reel Stats

Quick Start

1. Copy assets/style.css, assets/script.js and assets/img/ into your project.
2. Load the fonts, the stylesheet, GSAP and the script:

Code snippet omitted: it ships with the download.

3. Copy the whole <section class="ors" data-odometer-stats> element from index.html, between the EXTRACT START and EXTRACT END comments. Everything else in index.html is demo page furniture.

The script mounts every [data-odometer-stats] on the page. It needs GSAP core only; no plugins.

Make it yours

Figures

Each figure is one list item inside <ol data-ors-list>:

Code snippet omitted: it ships with the download.

• The value is the text of data-ors-value. Use whole numbers; group separators such as 46,812 or 46.812 are kept and fold away on shorter figures.
• A prefix or suffix goes in its own span beside the value: <span class="ors-item__prefix" data-ors-prefix>£</span> before it, or <span class="ors-item__suffix" data-ors-suffix>%</span> after it.
• The label says what is counted; the body says why it matters; the timeframe says when. Keep them all: they are what make a figure mean something.
• data-ors-split is the short name on the figure's button under the strip. On phones only the number shows.
• Add, remove or reorder whole <li> elements. The reels, buttons, 01 / 05 counters and the figure's size all follow the markup. With a single item the section shows one static figure and no buttons.
• The first two images use loading="eager"; later ones can stay lazy, because the script loads them all once the page has loaded.

Screen readers read each item's own copy, so they always hear the final figure, never a rolling one. The large rolling figure and the readout beside it are hidden from assistive technology.

Photographs

File	Shows	Size
assets/img/distance.webp	Runners crossing a footbridge at dusk	1536 x 1024
assets/img/first-finish.webp	A first-time finisher breaking the tape	1536 x 1024
assets/img/every-saturday.webp	Runners in heavy rain	1536 x 1024
assets/img/came-back.webp	Two runners high-fiving	1536 x 1024
assets/img/free.webp	A group setting off before dawn	1536 x 1024

To replace one, put your photo in assets/img/, change the src, the width and height to its real pixel size, and the alt text. Any aspect ratio works: the frame is 16:10 on wide screens and 4:5 on phones (set by --ors-slide-ratio), and the photo is cropped to fill it. Move the crop with --ors-focus on the <figure> (for example 30% 50% keeps the left side). Around 1600px wide is plenty. Keep the main subject near the middle: the photos drift slightly sideways as the strip moves.

Brand variables

All on the section root, .ors:

Code snippet omitted: it ships with the download.

A rebrand, for example a cycling event on lime:

Code snippet omitted: it ships with the download.

Check the contrast of --ors-ink on --ors-ground (the demo pair is 6.05:1). The figure is fitted to its column from real glyph measurements, so any display face works; choose one with lining figures. The Anybody width axis is what gives the narrow figures and wide titles: with another face, remove the font-stretch and font-variation-settings lines or leave them, since faces without a width axis ignore them.

Behaviour and options

• Strip: a native sideways scroller with snapping. Touch and trackpads scroll it directly; a mouse can drag it and flick it on to the next figure. Vertical wheel movement always scrolls the page.
• Figure: follows the strip's exact position, so stopping halfway leaves the reels halfway and reversing rolls them back. Its blur and lean follow the strip's speed and settle to nothing.
• Buttons and keys: the buttons under the strip jump to a figure. With the strip focused, Left and Right (or Page Up and Page Down) step, Home and End go to the ends. A new press mid-move re-targets; any wheel, touch or drag cancels a move.
• Intro: when the section scrolls into view, the first figure rolls up from zero. Set its length in seconds with data-intro-duration="1.8" on the root.

JavaScript API:

Code snippet omitted: it ships with the download.

Instances are independent; several can share a page.

Accessibility and integration

• The heading is an <h2>; each figure's label is an <h3>. Change the tags freely: styling uses classes.
• The strip is a labelled, focusable region; the buttons expose the current figure with aria-current and include its value in their names, and moves by button or key are announced politely.
• With prefers-reduced-motion: reduce, there is no intro, blur, lean or parallax, the figure changes whole, and buttons jump without animation. Changing the preference while the page is open is handled.
• Without JavaScript, or if GSAP fails to load, the section is a sideways-scrolling strip with a visible scrollbar in which every photograph carries its own figure, label, explanation and timeframe.
• The section is full width by design and adapts to narrow columns with container queries. It does not pin, install a smooth scroller or change the page's scroll behaviour.
• The "Find your first run" link points at #find-a-run: replace it with your own destination.

Dependencies and credits

• GSAP 3.15.0 core from jsDelivr, under the GSAP standard licence.
• Anybody, Geist and Geist Mono from Google Fonts, under the SIL Open Font License.
• The five photographs are generated concept images of fictional people, made for this section; they do not show a real club or event. Swiftline Run Club and every figure, date and claim in the demo are sample content: replace them with your own before publishing.