Changelog Catch-up

Quick start

Files:

• index.html: the demo page. The section is everything from <section class="since-log" data-since …> to its closing </section>.
• assets/style.css: all styles, scoped to .since-log.
• assets/script.js: the behaviour (readable source). assets/script.min.js is the same code minified.
• assets/img/: the two photographs, at 1440 and 800 pixels wide.

Dependencies: GSAP 3.15.0 core and the Flip plugin, plus the two Google Fonts (Big Shoulders Display and Overpass). No build step.

Code snippet omitted: it ships with the download.

The script mounts every [data-since] on the page when the DOM is ready. The <style> block in the demo's <head> only colours the demo page and is not needed.

Make it yours

Releases

Each release is one <article data-since-release> inside [data-since-log], newest first. To add a release, copy a whole article, paste it at the top of the log and edit it:

Code snippet omitted: it ships with the download.

• data-version is the label on the ruler, in the summary and in the #since-… link. id must be unique on the page.
• <time datetime> drives the short date on the ruler (Nov ’26) and the date in the summary sentence.
• data-type is new, improved or fixed; it is counted into the summary item with the matching data-since-count. The visible type label is ordinary text you can rename.
• data-headline lists the entry under "The big ones"; data-behaviour lists it under "Works differently now" and adds a "Works differently now" note to the entry. The summary uses the entry's <strong> text as its title, so lead each flagged entry with a short bold name.
• A link with data-since-guide is offered under "Read before you update" whenever its release is newer than the visitor's pick.
• The figure, links paragraph and number of entries are all optional.

Removing or reordering releases needs no script changes: the ruler, counts, toggles and summary are all derived from the articles. The section works with one release (the ruler then offers "Earlier" and that version). There is no upper limit, but on wide screens the ruler spaces every version evenly in one row, so beyond about fourteen releases keep only recent ones here and link to a full archive.

Summary copy and actions

The picker and summary markup is inside <template data-since-console> at the top of the section. Nothing in a template renders on its own: the script copies it into the page and fills it from the releases, so without the script visitors simply get the full log. Edit the template's contents like any other HTML.

• Headings ("Works differently now", "The big ones", "Read before you update") and count labels are plain text in the markup. Remove a whole [data-since-group] to drop that list; data-since-max on its <ul> sets how many rows show before a "+ N more in the notes below" line.
• The download link ([data-since-download]) and manual link are ordinary links: set your own URLs. Any [data-since-latest] element is filled with the newest version.
• The sentence under the numerals is built from templates you can override on [data-since-note]: data-since-template (default You were on {from}, released {date}. {releases} since then.), data-since-template-earlier (default Every release from {oldest} to {latest} is open below: {releases}.), data-since-one and data-since-many. The up-to-date message is plain text in [data-since-current-note].
• On the ruler, data-since-earlier-label and data-since-earlier-note name the leftmost stop for anyone on an older version than the log lists.
• On the root: data-since-default is the version picked on load; data-since-marker (default You were on {v}), data-since-flag and data-since-toggle change the divider, behaviour note and "Show notes" wording.

Photos

Each photo is an ordinary <img> inside a release's <figure class="since-log__figure">:

File	Size	Used for
assets/img/reedbed-1440.webp, reedbed-800.webp	1440×960 and 800×533 (3:2)	Release 3.3, wind cleanup
assets/img/interview-1440.webp, interview-800.webp	1440×960 and 800×533 (3:2)	Release 3.0, timecode sync

To replace one, put your photo in assets/img/, then edit the src, srcset, width, height and alt on that <img>. Frames are shown at 3:2 with object-fit: cover; a photo of any other proportion is cropped to fit, and the inline --since-focus (for example --since-focus: 62% 55%) sets the point the crop keeps. To change the frame shape for every release, edit aspect-ratio on .since-log__figure img. Release photos are lazy in the markup because most start folded. The script starts downloading them shortly after the page loads, starts a release's photos as soon as a pick will open it, and holds that release's body shut until its photos have decoded (up to 3 seconds, so a broken image can't keep it closed). A release therefore never opens onto an empty frame.

Only add a photo where it shows something the release changed. A release without a figure needs no other edit.

Brand variables

All on .since-log:

Variable	Default	Use
--since-ground	#e3e9ec	Section background
--since-ink	#101a21	Text, rules, numerals, buttons
--since-ink-rgb	16,26,33	Ink as RGB for rules
--since-muted, --since-quiet	#46535d, #5b6872	Secondary text and older versions
--since-accent	#ff5b1a	The "new to you" fill, markers and type square
--since-on-accent	#101a21	Text on accent-filled chips (narrow layout)
--since-paper	#f7f9fa	Behaviour-change rows; text on ink
--since-display, --since-text	Big Shoulders Display, Overpass	Numerals and headings; body text
--since-width, --since-gutter	1240px, clamp(20px,5vw,72px)	Content width and side padding
--since-version-col	220px	Width of the version column in the log
--since-radius	3px	Corners on buttons, chips and photos

Example rebrand for a design tool:

Code snippet omitted: it ships with the download.

The accent is used as a fill behind text and as markers, not as text colour, so a light or dark accent both work; check --since-on-accent against it.

Behaviour and options

• Picking: the ruler's stops are native radio buttons. Click or tap a version, use the arrow keys, or press and drag along the ruler on wide layouts. Releases newer than the pick open top-down; on a newer pick they close bottom-up. The summary counts and lists update as each release is reached. A new pick during the sequence cancels the steps still to come and starts from where everything is, so rapid changes always settle on the last pick.
• Read what's changed: the link under the summary sentence ([data-since-goto] in the template) scrolls to the first release the last pick opened, or to the newest release, and moves focus to its version heading. A pick itself never scrolls the page.
• Individual releases: every release has a Show/Hide notes button. Opening an older release does not count it as new; choosing a different version resets that release to the default for its position.
• Summary links to behaviour changes and headline features open the release if needed, scroll the entry into view and move focus to it.
• Deep links: with data-since-hash on the root, the page reads #since-3.0 (or #since-earlier) on load and when the hash changes, and updates the hash with history.replaceState when the visitor picks (no extra history entries). Leave the attribute off to ignore the URL; with two sections on one page, give it to one.
• API: window.ChangelogCatchUp.mount(element) mounts a section added later; window.ChangelogCatchUp.unmount(element) stops it, removes the picker, summary and everything else it generated, and restores the fully open, static log. Mounting again rebuilds them from the template. Unmounting one section leaves other sections and other GSAP animation on the page untouched.

Accessibility and integration

• Without JavaScript, or if GSAP or Flip fails to load, the picker and summary are never added and every release reads in full in document order.
• With reduced motion, picks apply instantly with no unrolling, rolling or sliding, including when the setting changes while the page is open.
• Folded release bodies are inert and aria-hidden; the toggles carry aria-expanded and aria-controls. After a pick settles, a polite status message reads the counts ("Since 3.1: 4 new features, 5 improvements, 5 fixes.").
• The section heading is an h2, releases use h3. Change the tags if your page needs other levels; styles are class-based.
• The layout responds to the section's own width (container queries). Below about 700px the ruler becomes a grid of version chips, newer versions filled with the accent, and each release stacks its version beside its date. It has been tested in a 460px column.
• The section sets no scroll behaviour and needs no full-width or sticky container. It only changes height as releases open.

Dependencies and credits

• GSAP 3.15.0 core and Flip, loaded from jsDelivr.
• Fonts: Big Shoulders Display and Overpass, both under the SIL Open Font License, loaded from Google Fonts.
• Photography: two generated concept images of a fictional recorder, made for this section. They do not show a real product or real people.
• Plover Desk, the Plover P2 and all release content are fictional sample material.