ef-timeline

Full-featured timeline editor with tracks, hierarchy view, playback controls, and zoom. Shows the temporal structure of compositions with interactive editing capabilities.

Basic Usage

Complete timeline editor for a composition.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="timeline-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
  <ef-text class="absolute top-4 left-4 text-white text-3xl font-bold">Timeline Demo</ef-text>
  <ef-text class="absolute bottom-4 left-4 text-white text-lg">Subtitle text</ef-text>
</ef-timegroup>
<div class="mt-4 h-[400px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-timeline target="timeline-demo"></ef-timeline>
</div>

Sequence Timeline

Timeline automatically adapts to sequential compositions.

<ef-timegroup mode="sequence" class="w-[720px] h-[480px] bg-black" id="seq-timeline">
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="2s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-4xl bg-blue-600 p-4 rounded relative">First</h1>
  </ef-timegroup>
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="5s" sourceout="7s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-4xl bg-purple-600 p-4 rounded relative">Second</h1>
  </ef-timegroup>
</ef-timegroup>
<div class="mt-4 h-[350px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-timeline target="seq-timeline"></ef-timeline>
</div>

Minimal Timeline

Hide controls for a compact timeline view.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="minimal-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
  <ef-text class="absolute bottom-4 left-4 text-white text-2xl">Compact View</ef-text>
</ef-timegroup>
<div class="mt-4 h-[250px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-timeline
    target="minimal-demo"
    show-controls="false"
    show-ruler="false"
  ></ef-timeline>
</div>
<div class="mt-2 flex gap-2">
  <ef-controls target="minimal-demo">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  </ef-controls>
</div>

Timeline with Zoom Controls

Built-in zoom controls for detailed editing.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="zoom-timeline">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="5s" class="size-full object-contain"></ef-video>
  <ef-text class="absolute top-4 left-4 text-white text-2xl">Zoomable Timeline</ef-text>
</ef-timegroup>
<div class="mt-4 h-[350px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-timeline target="zoom-timeline" min-zoom="0.5" max-zoom="5"></ef-timeline>
</div>

Filtering Timeline Tracks

Control which elements appear in the timeline.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="filter-timeline">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
  <ef-text class="absolute top-4 left-4 text-white text-2xl">Main Title</ef-text>
  <ef-text class="absolute bottom-4 left-4 text-white text-sm helper">Helper</ef-text>
  <ef-text class="absolute bottom-4 right-4 text-white text-xs watermark">© 2024</ef-text>
</ef-timegroup>
<div class="mt-4 h-[300px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-timeline target="filter-timeline" hide=".helper, .watermark"></ef-timeline>
</div>

Timeline Features

Playback control — Play/pause/loop buttons with keyboard shortcuts (Space for play/pause).

Time navigation — Click ruler or tracks to seek, drag playhead for scrubbing.

Zoom control — Zoom buttons and Cmd/Ctrl+Wheel for zooming toward cursor.

Frame snapping — At high zoom, snaps to frame boundaries for precision editing.

Auto-scroll — Playhead auto-scrolls during playback to stay visible.

Keyboard navigation — Arrow keys move by frame, Shift+Arrow moves by second.

Hierarchy view — Shows composition structure with nested elements.

Track visualization — Visual tracks for video, audio, text, images, and timegroups.

Selection integration — Syncs with ef-canvas for selecting and highlighting elements.

State persistence — Remembers zoom and scroll position per composition.

Timeline with Canvas

Timeline automatically integrates with canvas for selection and highlighting.

<ef-canvas class="w-[720px] h-[480px] bg-black" id="canvas-timeline">
  <ef-timegroup mode="contain" class="size-full">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain" id="canvas-video"></ef-video>
    <ef-text class="absolute top-4 left-4 text-white text-3xl font-bold" id="canvas-title">
      Editable
    </ef-text>
  </ef-timegroup>
</ef-canvas>
<div class="mt-4 h-[350px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-timeline target="canvas-timeline"></ef-timeline>
</div>
<div class="mt-2 text-white text-sm">
  Click elements in canvas or timeline to select. Hover tracks to highlight elements.
</div>

Zoom Levels

Timeline zoom affects level of detail:

• 1x (default) — Standard view, balanced detail
• 0.1x to 0.5x — Zoomed out, see entire long compositions
• 2x to 5x — Zoomed in, frame markers appear for precision
• 5x to 10x — Maximum zoom for frame-accurate editing

Frame markers become visible when there's enough space (typically above 2x zoom).

Keyboard Shortcuts

When timeline has focus:

• Space — Play/pause
• Arrow Left/Right — Move by one frame
• Shift + Arrow Left/Right — Move by one second
• Cmd/Ctrl + Wheel — Zoom toward cursor

CSS Custom Properties

Customize timeline appearance:

ef-timeline {
  --ef-color-bg: #0f172a;
  --ef-color-border: #334155;
  --ef-color-playhead: #3b82f6;
  --ef-color-primary: #3b82f6;
  --ef-hierarchy-width: 200px;
  --ef-row-height: 24px;
  --ef-track-height: 24px;
}

Configuration Patterns

Simple playback — Just timeline with controls:

<ef-timeline target="composition" show-hierarchy="false"></ef-timeline>

Editing mode — Full features with trim handles:

<ef-timeline target="composition" enable-trim></ef-timeline>

Reference view — Static timeline without controls:

<ef-timeline
  target="composition"
  show-controls="false"
  show-playhead="false"
></ef-timeline>

Notes

• Timeline provides a complete editing interface with controls

• Use ef-filmstrip for a simpler view without controls

• Automatically syncs with playback state

• Supports frame-by-frame navigation with arrow keys

• Gestural zoom with Cmd/Ctrl + wheel

• Hierarchy panel shows element names and nesting

• Enable trim mode to edit clip in/out points

• Timeline state persists in localStorage per composition