Timeline Navigation Example

Fit methods pan and zoom until the requested content fits. Date methods pan without changing zoom. setZoom() changes scale around the viewport center by default; lower values show a closer view and higher values show a wider view.

The status reports completion from onComplete after the final viewport draw. Disable animation to try the same asynchronous callback for immediate requests; another navigation or gesture cancels pending completion. See completion rules.

Need to limit how far users can navigate? See the Date Bounds example.

// Run these navigation examples separately.
// A new request cancels any pending completion callback.
const fitOptions = {
  padding: { left: 70, right: 70 },
  animation: { active: true, duration: 350, easing: "swing" },
  onComplete: () => console.log("Final viewport drawn")
};

timeline.fitDateRange(
  { year: 1957, month: 1, day: 1 },
  { year: 1969, month: 12, day: 31 },
  fitOptions
);

const apollo = timeline.getArticleById("navigation-apollo");
timeline.fitArticleRange(apollo, fitOptions);

timeline.fitArticles(fitOptions);

// Sub-day and deep-time navigation needs the opt-in zoom floor;
// zoom.minimum defaults to 0, which keeps day as the finest scale.
const timeline = new Histropedia.Timeline(container, {
  zoom: { initial: 29, minimum: -82 },
  // ... other options ...
});

// Run these navigation examples separately.
timeline.setStartDate("1988-01-01", {
  padding: 80,
  animation: { active: true, duration: 350, easing: "swing" },
  onComplete: () => console.log("Final viewport drawn")
});

timeline.setCentreDate("1969-07-20");

// Canonical strings accept an optional time part.
timeline.setCentreDate("1969-07-20T20:17:40.25"); // .250

// Fit a one-millisecond range in deep time.
timeline.fitDateRange(
  "1000000000-06-15T12:00:00.000",
  "1000000000-06-15T12:00:00.001",
  { padding: { left: 70, right: 70 }, animation: { active: true, duration: 350 } }
);

// Lower values show a closer view; higher values show a wider view.
timeline.setZoom(27);