Renders a multi-track timeline for the target composition. Includes a time ruler, per-element track rows, a draggable playhead, and built-in playback and zoom controls. Zoom state is persisted to localStorage keyed by the root timegroup ID.
<ef-timegroup id="demo" mode="sequence" class="w-[1920px] h-[1080px] bg-slate-900">
<ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-indigo-900 flex items-center justify-center">
<ef-text class="text-white text-7xl font-bold">Scene A</ef-text>
</ef-timegroup>
<ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-rose-900 flex items-center justify-center">
<ef-text class="text-white text-7xl font-bold">Scene B</ef-text>
</ef-timegroup>
<ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-emerald-900 flex items-center justify-center">
<ef-text class="text-white text-7xl font-bold">Scene C</ef-text>
</ef-timegroup>
</ef-timegroup>Use show-* attributes to control which panels are visible:
html
<!-- Timeline with all panels -->
<ef-timeline target="my-canvas" show-ruler show-hierarchy show-playback-controls show-zoom-controls></ef-timeline>
<!-- Ruler and playhead only -->
<ef-timeline target="my-canvas" show-ruler show-playhead></ef-timeline>Keyboard shortcuts (when focused):
| Key | Action |
|---|---|
← / → | Step one frame |
Shift+← / Shift+→ | Step one second |
Scroll | Pan timeline |
Cmd/Ctrl+Scroll | Zoom toward cursor |
ef-timeline does not itself expose a track part — the per-row clip lives on the nested ef-timeline-row element it renders internally:
css
ef-timeline::part(scrub-overlay) { pointer-events: auto; }
ef-timeline-row::part(track) { background: #1a1a2e; border-radius: 4px; }Attributes
5 of 5
follow-playhead
- React prop
followPlayhead- Type
boolean- Default
true- Description
- Auto-scrolls the timeline to keep the playhead visible during active playback.
hierarchy-width
- React prop
labelWidth- Type
number- Default
160- Description
- Width of the layer hierarchy panel in pixels.
pixels-per-second
- React prop
pixelsPerSecond- Type
number- Default
100- Description
- Zoom level — pixels rendered per second of composition time.
row-height
- React prop
rowHeight- Type
number- Default
28- Description
- Height of each track row in pixels.
target
- React prop
target- Type
string- Default
""- Description
- ID of the target element this component controls or reads from.
CSS Parts
| Part | Description |
|---|---|
scrub-overlay | This part is the full-area overlay. It captures pointer drags while the user scrubs. |