Experiments >

Code animation: Event editor

Experiment #15626th April, 2021by Joshua Nussbaum

This integrates the previous experiment where I researched creating a DSL for defining property editor components.

EventEditor component

The <EventEditor> component contains all the inputs for editing an event. Depending on the type of event (ie append, insert, scroll, etc..), additional fields are conditionally displayed.

Here’s what the component looks like:

<!-- EventEditor.svelte -->
  import { document } from '$lib/document'
  import { Section, TextField, SelectField } from '$lib/components/properties'
  import { easingFunctions } from './easing'
  import AppendEditor from './events/AppendEditor.svelte'

  export let event

  const types = [
    { label: "Append", value: 'append' },
    { label: "Insert", value: 'insert' },
    { label: "Delete", value: 'remove' },
    { label: "Replace", value: 'replace' },
    { label: "Select", value: 'select' },
    { label: "Scroll", value: 'scroll' }

  // for now only AppendEditor exists. TODO.
  const components = {
    append: AppendEditor,
    insert: AppendEditor,
    remove: AppendEditor,
    replace: AppendEditor,
    select: AppendEditor,
    scroll: AppendEditor,

<Section title="Type">
  <SelectField name="type" bind:value={event.type} options={types}/>

<Section title="Label">
  <TextField name="label" bind:value={event.label}/>

<Section title="Effects">
  <TextField name="duration" label="Duration (ms)" type="number" bind:value={event.duration} min={0} step={10}/>
  <SelectField name="easing" label="Easing" bind:value={event.easing} options={easingFunctions}/>

<Section title="Caption">
  <TextField name="caption" bind:value={event.caption}/>

<svelte:component this={components[event.type]} bind:event/>

And the AppendEditor.svelte looks like this:

  import { document } from "$lib/document"
  import {
  } from "$lib/components/properties"

  export let event

<Section title="Code">
  <CodeField name="code" language={$document.window.language} bind:code={event.text} />

<Section title="Options">
  <CheckboxField name="typewriter" label="Typewriter Effect" bind:value={event.typewriter} />
  <CheckboxField name="highlight" label="Highlight" bind:value={event.highlight} />





  • Bug: CodeField is throwing errors.
  • Bug: Changes to event are not reflected on timeline.
  • Add editors for each type of event (scroll, select, insert, delete, replace)
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow