Designful Launch editor

Create a Timeline

All Tags /AnimationTimelineKeyframes

Overview

Use editor.animation to create a timeline, add tracks, and define keyframes for object properties.

UI Workflow

  1. Select a single object on canvas.
  2. Open the right Properties panel and find the Animation section.
  3. Click New Timeline, set Duration, then choose a property and click Add Track.
  4. Set playhead/keyframe time, enter value, then click Add Keyframe.

API

const timelineId = editor.animation.createTimeline('Card Motion')
editor.animation.updateTimeline(timelineId, { duration: 1200, fps: 60 })

const trackId = editor.animation.addTrack(timelineId, objectId, 'transform.x')
editor.animation.addKeyframe(trackId, { time: 0, value: 40, easing: { type: 'OUT_CUBIC' } })
editor.animation.addKeyframe(trackId, { time: 1200, value: 360, easing: { type: 'IN_CUBIC' } })

Behavior

  • Timeline and keyframe mutations are validated by @designful/schema-validator.
  • Animation data is stored per page in page.metadata.animation.
  • Timeline and keyframe edits are added to undo/redo history.
  • Deleting an object automatically removes its animation tracks.
  • Duplicating an object also duplicates its timeline tracks by default (duplicateAnimationTracksOnCopy can disable this).
  • Auto-layout children can animate only transform.*, opacity, and visible. Unsupported track properties are rejected.

Playback

editor.playAnimation(timelineId)
editor.pauseAnimation(timelineId)
editor.seekAnimation(timelineId, 600)

Playback updates object values with history disabled, so preview does not create undo noise.