Focus

Pan and zoom the timeline to a specific item, date, or range.

If the user has enabled prefers-reduced-motion in their OS settings, animations are automatically skipped — the timeline jumps to the target position instantly.

FocusOptions

Property	Type	Default	Description
`id`	`string \| number`	—	Item identifier to focus on.
`date`	`string \| number \| Date`	—	Date to centre the timeline on.
`range`	`[DateInput, DateInput]`	—	Two-element tuple defining the range to display.
`animate`	`boolean`	`false`	Animate the transition.
`duration`	`number`	`500`	Animation duration in milliseconds.
`easing`	`EasingFunction`	`"easeInOut"`	Easing curve for the animation.
`zoom`	`boolean \| "auto"`	`"auto"`	Whether to zoom to fit the target item. `"auto"` zooms only when the item is large relative to the current view.

Calling focus() with no arguments centres the timeline on the full range of all items.

Note: calling focus() clears any active tooltip.

When zoom is set to "auto", the timeline only zooms if the target item occupies more than 80% of the current visible range. Otherwise it keeps the current zoom level and centres on the item.

Focus by Item

timeline.focus({ id: 42, animate: true, duration: 800 });

Focus by Date

timeline.focus({ date: '2026-06-15', animate: true });

Focus by Range

timeline.focus({
  range: ['2026-01-01', '2026-03-31'],
  animate: true,
  duration: 600
});

Easing Functions

The easing option accepts one of the following values:

Value	Description
`"linear"`	Constant speed, no acceleration.
`"easeIn"`	Starts slow, accelerates.
`"easeOut"`	Starts fast, decelerates.
`"easeInOut"`	Slow start and end, fast middle. This is the default.
`"easeInCubic"`	Stronger ease-in curve.
`"easeOutCubic"`	Stronger ease-out curve.
`"easeInOutCubic"`	Stronger ease-in-out curve.