Timeline Overview

1 min read

PinePaper includes a timeline system for precise control over animations and keyframes.

Timeline UI

The timeline panel provides:

  • Visual playback controls (play, pause, scrub)
  • Keyframe markers for animated items
  • Time display and duration settings

Basic Playback

// Play timeline with 8 second duration, looping
app.playKeyframeTimeline(8, true);

// Stop playback
app.stopKeyframeTimeline();

// Set specific time (scrubbing)
app.setPlaybackTime(2.5);

Playback State

// Check if playing
const isPlaying = app.isPlayingKeyframes;

// Get current time
const currentTime = app.playbackTime;

// Get total duration
const duration = app.keyframeDuration;

Timeline Events

The timeline integrates with the animation system:

  1. Frame-based animations (pulse, rotate, etc.) run continuously
  2. Keyframe animations are time-based and respond to playback controls

Timeline UI Component

// Initialize timeline UI
const timeline = new TimelineUI(app);

// Timeline automatically syncs with app.playbackTime

See Keyframes for detailed keyframe animation documentation.