Fit content, pan to a date, or change zoom with the timeline's viewport APIs.
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.
Run the task that matches your use case, then compare it with the corresponding code below.
Need to limit how far users can navigate? See the Date Bounds example.
const fitOptions = {
padding: { left: 70, right: 70 },
animation: { active: true, duration: 350, easing: "swing" }
};
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);timeline.setStartDate("1988-01-01", {
padding: 80,
animation: { active: true, duration: 350, easing: "swing" }
});
timeline.setCentreDate("1969-07-20");
// Lower values show a closer view; higher values show a wider view.
timeline.setZoom(27);