Interactive

Navigation and progress components that help readers orient themselves within your story.

Timeline

Light — ~3KB

A vertical timeline with dates, icons, and descriptions — ideal for showing a sequence of events, milestones, or historical developments. Events alternate left and right on desktop for visual variety.

River management history

Five key dates in the story of Australia's largest river system.

First European Survey

Captain Charles Sturt navigates the Murray River to its mouth, mapping the river system for the first time and documenting the vast inland waterways.

Lock and Weir Construction Begins

The first navigation locks are built along the Murray, transforming the river from a natural waterway into a managed infrastructure system for irrigation and transport.

Algal Crisis

A massive blue-green algae bloom stretches over 1,000 km of the Darling River, triggering national awareness of river health and over-extraction.

Water Act and Basin Plan

The Australian Government passes the Water Act, establishing the Murray-Darling Basin Authority and setting sustainable extraction limits for the first time.

Environmental Water Recovery

Over 2,100 gigalitres of water rights recovered for the environment, with measurable improvements in wetland health and native fish populations across the basin.

Without icons

A simpler timeline without emoji icons — lets the content speak for itself.

Basin Plan Adopted

The Murray-Darling Basin Plan is formally adopted, setting sustainable diversion limits and a framework for returning water to the environment over the next decade.

Northern Basin Review

A comprehensive review of northern basin water recovery targets leads to adjusted extraction limits, balancing community needs with environmental outcomes.

Restoring the Balance

Over 2,100 gigalitres recovered for the environment through buybacks and infrastructure upgrades, with measurable improvements in wetland health.

Short timeline (3 events)

A compact three-event timeline showing the lifecycle of a water infrastructure project.

Design Approved

Engineering plans for the Menindee Lakes water-saving project receive final approval after two years of environmental impact assessment.

Construction Begins

Earthworks commence on the lake interconnection channels, designed to reduce evaporation losses by 80 gigalitres per year.

Operational

The upgraded system becomes operational, delivering its first season of water savings and environmental flows to the lower Darling.

When to use

  • Historical sequences — 'how we got here' narratives with 4-8 key dates
  • Project milestones — planning, construction, completion, impact assessment
  • Any chronological story where dates and sequence matter

When NOT to use

  • Non-chronological content — use a list or cards instead
  • More than 8-10 events — the timeline becomes too long. Consider splitting into phases
  • If you need interactive scroll-driven reveal of events — combine with ScrollySection

Configuration

  • Each event needs: a date (text — can be a year, full date, or era), and content describing what happened
  • Icon: an optional emoji or symbol next to each event dot — helps readers scan quickly
  • Events automatically alternate left/right on desktop and stack vertically on mobile
  • The timeline rail and events animate into view as the reader scrolls down

Limitations

  • Designed for vertical scrolling — no horizontal timeline option
  • On mobile, all events stack on one side (no alternating)
  • The animation plays once when scrolled into view