Keyframe Editor

Create complex, precisely-timed animations using keyframes.

What are Keyframes?

Keyframes define specific property values at specific points in time. PinePaper automatically animates (interpolates) between keyframes to create smooth transitions.

Opening the Timeline

The Timeline panel is at the bottom of the screen. If hidden:

1. Click View in the menu
2. Select Show Timeline

Creating Keyframes

Method 1: Properties Panel

1. Select an item
2. Set the playhead to the desired time
3. Change a property (position, scale, opacity, color)
4. A keyframe is automatically created

Method 2: Timeline Panel

1. Select an item
2. Click on the timeline at the desired time
3. Click Add Keyframe or press K

Keyframeable Properties

Editing Keyframes

Moving Keyframes

Drag a keyframe left or right on the timeline to change its time.

Editing Values

1. Click on a keyframe to select it
2. Modify values in the Properties Panel
3. Changes apply to that keyframe

Deleting Keyframes

1. Select the keyframe
2. Press Delete or right-click → Delete Keyframe

Easing Functions

Control the acceleration of animations between keyframes:

Playback Controls

Trim and Split

Each keyframe-animated item appears on the timeline as a draggable clip block (the indigo bar behind the keyframe diamonds). The clip block lets you:

• Drag the body — shift the entire animation in canvas time (timeOffset).
• Drag the left edge — trim the start of the played sub-range. The right edge of the bar stays anchored, matching the Premiere/Canva convention.
• Drag the right edge — trim the end of the played sub-range, clamped to the last keyframe’s time.
• Press S with the playhead inside the clip — split at the playhead. The new piece becomes its own registry entry; chaining splits produces N+1 independent pieces.

Data fields

The clip-block UI maps to these fields on the item:

Outside the clip’s canvas window the item is hidden via visible=false — opacity is left alone so opacity-animating keyframes still work inside the window.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

What split gives you

The split is a deep copy. The Paper.js item is cloned via Item.clone() (preserves transform + style); the keyframe arrays (keyframes, contentKeyframes, propertyEasings) are JSON round-tripped so each piece owns its data. Chaining splits scales linearly: N splits ⇒ N+1 independent pieces, each its own registry entry. Practical consequences:

• Per-piece easing — change a single keyframe’s easing on one piece; the others are untouched.
• Per-piece color or value interpolation — edit a keyframe’s fillColor, strokeColor, or any animated property on one piece to apply a different transformation over its window. The existing color and gradient interpolators handle HSL/RGB lerp unchanged.
• Per-piece spatial path — spatialHandles live inside individual keyframes, so curving the path of one piece’s animation doesn’t affect the others.

Pieces don’t visually overlap as long as their canvas windows don’t overlap. Drag any piece to a new canvas-time position, trim it again, or split it further.

Example: Fade In Animation

1. Select a text item
2. At time 0s: Set Opacity to 0
3. At time 1s: Set Opacity to 1
4. Set easing to Ease Out
5. Press Play to preview

Example: Color Transition

1. Select an item
2. At time 0s: Set Fill Color to #FF0000 (red)
3. At time 2s: Set Fill Color to #0000FF (blue)
4. The color smoothly transitions through the spectrum

Example: Camera Pan Effect

Create cinematic pan animations across large images using the canvas as a viewport.

How It Works

When you have an image larger than your canvas:

• The canvas bounds act as the camera viewport
• Moving the image left = camera pans right
• Moving the image up = camera pans down

Creating a Pan Animation

1. Set canvas size to your desired output (e.g., 1920×1080 for HD video)
2. Import a large image (larger than canvas)
3. Position the image so the starting view is visible
4. Create keyframes to move the image position

Row-by-Row Scanning Pattern

To scan across an image in a serpentine pattern:

Alternative: Camera Follows

For dynamic camera movement that follows an object:

1. Create a small marker or path
2. Add a camera_follows relation to the marker
3. Animate the marker position
4. The viewport automatically follows

Tips