Canvas Timeline
Function

useTimelineTimePosition

Imperatively positions a low-count DOM affordance at a timeline time. The returned transform is viewport-space: `seconds * zoomScale - scrollLeft`. Use it for standalone affordances such as the playhead grabber. Range controls that already live inside a transformed timeline overlay should use their local control primitive positioning instead.

Signature

Type Definition
useTimelineTimePosition(options: UseTimelineTimePositionOptions): UseTimelineTimePositionResult<T>

Type parameters

NameConstraintDefaultDescription
THTMLElementNoneHTMLElement type that receives the viewport-space transform.

Parameters

NameTypeDescription
optionsUseTimelineTimePositionOptionsTimeline engine, time value, and events that should refresh the transform.

Returns

UseTimelineTimePositionResult<T>

Ref and imperative updater for the positioned element.

Examples

tsx Example
import type { RationalTime } from '@techsquidtv/canvas-timeline-utils';
import { useTimeline, useTimelineTimePosition } from '#react/hooks';


export function MarkerHead({ markerTime }: { markerTime: RationalTime }) {
  const { engine } = useTimeline();
  const position = useTimelineTimePosition<HTMLDivElement>({
    engine,
    time: markerTime,
    positionEvents: ['render', 'state:settled'],
  });


  return <div ref={position.ref} className="marker-head" />;
}

Related links