Animated timeline infographic generator

The "company milestones" video gets requested every quarter — founded in 2019, Series A in 2021, launched the API in 2023, hit a million users in 2025 — and every time it gets rebuilt from scratch in Canva or After Effects. The result is a 12-second video where the dates are baked into pixels and adding a new milestone means starting over.

A timeline infographic is one of the most templated things in marketing, which is why it should never be hand-animated. The shape is fixed: a vertical line, a series of dots, alternating left/right labels. The only variable is the data. Once you build it as an HTML template driven by JSON, every future milestone is a one-line edit and a re-render.

What an animated timeline actually is

Four primitives, in order of how they should appear:

1. A vertical spine — a single line down the center, drawn from top to bottom with transform: scaleY() or stroke-dashoffset. The spine is the timeline's literal backbone.
2. Milestone dots — circles that land on the spine at their date's vertical position. Pop-in with a soft back-ease.
3. Date + title labels — sliding in from alternating sides (year on the left, milestone on the right, then swap). The alternating layout is the whole reason timelines feel like timelines.
4. A connector tick — a small horizontal line from the spine to each label, drawn just before the label slides in. Optional, but it's what holds the layout together visually.

The four pieces fire in a relay: spine first, then for each milestone, the dot lands → the tick draws → the label slides. Stagger between milestones so the eye reads each event before the next arrives.

The data shape

A timeline is a list of milestones, each with a date, a title, and a one-line blurb. The dates can be years, full ISO dates, or freeform strings — the template uses them as labels, not for layout. Vertical position is computed from the index, not from the date value.

{
"title": "HyperFrames · A short history",
"milestones": [
  { "year": "2019", "title": "Founded",     "blurb": "Two engineers, one render engine." },
  { "year": "2021", "title": "Open beta",   "blurb": "First public release." },
  { "year": "2023", "title": "API launch",  "blurb": "Programmatic rendering for teams." },
  { "year": "2025", "title": "1M renders",  "blurb": "A million deterministic videos." }
]
}

The alternating left/right side is derived from the index — even on the right, odd on the left. The template never needs "side": "left" in the JSON; the layout is the index's job.

The spine draw

The spine is one of three things: a CSS div with transform: scaleY(0) to scaleY(1), an SVG line with stroke-dashoffset, or a clip-path: inset(0 0 100% 0) to inset(0 0 0% 0). All three work. The CSS scale is the cleanest because it survives any zoom level without recalculating dash lengths.

Anchor the transform-origin to the top. The spine grows downward — same direction as the eye is going to read. Bottom-up reads as "rewinding" and confuses the entry point.

The spine should land before the first dot fires. About 1.2 seconds for the spine to fully draw, with the first dot starting at 1.0s, gives the spine a moment to "land" before milestones start appearing. The eye sees the structure, then sees the events.

The dot, tick, and label relay

For each milestone, three things happen in sequence:

1. Dot lands — pop-in with easeOutBack (overshoot ~1.5). 500ms.
2. Tick draws — from the spine outward to where the label will land. scaleX from 0 to 1, anchored at the spine side. 350ms, starting 250ms after the dot fires.
3. Label slides in — from 20px away from the spine, fading and translating to its final position. 500ms, starting 400ms after the dot fires.

The overlap is intentional. The tick starts drawing before the dot has fully settled; the label starts sliding before the tick is done. Each element pulls the next into place, like a Rube Goldberg machine where every step kicks the next one. Strictly sequential beats feel mechanical; overlapping beats feel choreographed.

The slide direction depends on the side. For a right-side milestone, the label translates from +20px, -50% to 0, -50%. For the left side, from -20px, -50% to 0, -50%. The motion is always "toward the spine," which gives the layout a visual gravity.

Spacing and pacing

Two timings dominate the feel of a timeline video:

• Milestone spacing (vertical, in pixels). 80–100px between milestones is the sweet spot at 1080p. Tighter and the labels collide. Looser and the spine feels stretched.
• Milestone stagger (time, in seconds). 0.9–1.0 seconds between milestone reveals. Less feels rushed; more feels padded. For a 4-milestone timeline, that fills 4 of the 6 seconds — the spine takes 1s, the milestones take 4s, the final beat is a 1-second "let it land" pause.

For longer timelines (8+ milestones), don't extend the duration linearly. Either chunk them into chapters (decade by decade) or speed up the stagger to 0.6s and let the early milestones flick by quickly. A timeline video that runs 15 seconds is too long for social and not detailed enough for a doc page; it's neither.

Parameterizing the timeline

The knobs that come up most: the accent color (dot fill), the typeface scale, and the milestone stagger. Wire all three and the same template generates onboarding videos, company-history reels, and product roadmaps without re-touching the layout.

For a roadmap-style video, swap the dot color to #2b66ff (a calmer blue) and add a small "Q1 2026" subtitle under each year. For a fundraising-history video, use #1f8a5b for years that involve a round close. The accent color is the cheapest narrative knob you have.

Horizontal timelines

A horizontal timeline (left-to-right instead of top-to-bottom) reads naturally as "time passing" and is a great choice for short, dense histories — 6+ milestones on a 16:9 frame. The same primitives work: a horizontal spine with scaleX, dots at x-positions, labels above/below alternately.

The tradeoff is label space. Vertical timelines give each label a full half-width to breathe in; horizontal timelines give each label a column. For long titles or multi-line blurbs, stay vertical.

For a horizontal example, see render 10k variants overnight — the same template renders horizontally for short event recaps.

Render to MP4

The HTML is the template; the JSON is the data; the renderer turns every frame into a deterministic output. Because every property — spine scale, dot scale, tick scale, label slide, label opacity — is a pure function of t and the milestone index, the output is byte-identical across machines.

hyperframes render timeline.html --out history.mp4 --duration 6 --fps 30

For longer timelines, bump --duration 10 and adjust the stagger variable. The template adapts — no manual keyframe-tweaking, no After Effects file to keep in sync with the deck. The whole pattern is the canonical case for programmatic video from data.

FAQ

How many milestones is too many?

Six is the practical maximum for a single-shot timeline. Past that, the labels start competing for vertical space and the eye loses track of the order. For 8–15 milestones, split into two chapters — "early years" then "growth" — and concatenate the videos. For 15+, you're making a documentary, not an infographic.

Can the milestones include images or icons?

A small icon next to the year (e.g., a flag for a launch, a chart for a fundraise) works if you keep it under 24px. Anything bigger and the dot/tick/label rhythm breaks. For full hero images, render them as a second video and concatenate.

How do I show ongoing milestones (not yet completed)?

Use a hollow dot (white fill, accent stroke) for milestones with a status: 'planned' flag in the JSON, and dim the label to 60% opacity. The animation timing is identical — only the styling differs. This pattern works great for product roadmap videos where half the milestones are future-tense.

Can I make a timeline that scrolls (longer than the viewport)?

Yes, but rendering long-scroll content to a fixed-aspect MP4 is its own can of worms — see from DOM to MP4 for the camera-pan pattern. For most use cases, splitting into multi-shot videos (one per chapter) is cleaner than a single scrolling shot.

How do I keep the timeline accessible (screen readers, etc.)?

The static HTML (before any animation fires) should already be a semantic <ol> of milestones with <time> elements for the dates. The animation is aria-hidden decoration; the underlying markup is what assistive tech sees. The MP4 export needs captions or a transcript separately — see burning subtitles into MP4.

Where to go next

A timeline is the canonical "events in order" visualization. The same primitives — a spine, dots, alternating labels — handle product changelogs, fundraising histories, and feature-launch sequences. Drop the JSON into the playground and swap your own milestones; the template adapts. For more on the deterministic render pipeline this depends on, see deterministic rendering. For related patterns, the animated Gantt chart post covers the date-axis equivalent and the animated changelog post handles the release-history case.

Four milestones, one spine, zero re-recordings.