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

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