All examples

Animation timeline editor

Edits a fictional lower-third composition with a selected keyframe, live preview, and an RTL timeline view.

Animation timeline editor

media-animation-timeline · media/AnimationTimeline

media animation
Props
  • animation
  • composition
  • preview
  • timeMs
  • trust
  • value

Live example loads in an isolated same-origin preview frame.

Source (media-animation-timeline/entry.ts) 
import { defineExample } from '../registry.ts';

export const mediaAnimationTimelineExample = defineExample({
  id: 'media-animation-timeline',
  title: 'Animation timeline editor',
  description:
    'Edits a fictional lower-third composition with a selected keyframe, live preview, and an RTL timeline view.',
  tags: ['media', 'animation', 'timeline', 'editing', 'rtl'],
  component: 'media/AnimationTimeline',
  props: ['composition', 'animation', 'value', 'timeMs', 'preview', 'trust'],
  load: () => import('./MediaAnimationTimelineDemo.svelte'),
});