# Keyframes
Keyframes are the foundation of animation in Lottie Creator. They mark specific values for properties at specific times, and the software automatically creates smooth transitions between them.

## What Are Keyframes?

A keyframe is a marker on the timeline that records the value of a property at a specific frame.

### How Keyframes Work

**Interpolation:**

<List type="bullet">
  <ListItem>The software automatically calculates in-between values</ListItem>
  <ListItem>Creates smooth transitions without manual frame-by-frame animation</ListItem>
  <ListItem>Easing controls how the interpolation happens</ListItem>
</List>

**Example:**

```
Frame 0:  Position X = 100px  [Keyframe 1]
Frame 30: Position X = 400px  [Keyframe 2]

Result: Circle smoothly moves from left to right over 1 second
```

**Available Properties:**

<List type="bullet">
  <ListItem>Transform: Position, Scale, Rotation, Skew, Skew Axis</ListItem>
  <ListItem>Appearance: Opacity, Fill Color, Stroke Color, Stroke Width</ListItem>
  <ListItem>Shape-specific: Size, Roundness, Points, Radius</ListItem>
  <ListItem>Path: Trim Path (Start, End, Offset)</ListItem>
  <ListItem>Gradient: Colors and positions</ListItem>
</List>

## Visual Representation

Keyframes appear in the timeline as diamond-shaped icons.

### Keyframe Icons

There are four types of keyframe icons based on their easing:

**1. Arrow Right**

<List type="bullet">
  <ListItem>Easing in but no easing out</ListItem>
  <ListItem>Applies to the starting keyframe</ListItem>
</List>

**2. Arrow Left**

<List type="bullet">
  <ListItem>Easing out but no easing in</ListItem>
</List>

**3. Diamond**

<List type="bullet">
  <ListItem>Standard keyframe</ListItem>
  <ListItem>No easing</ListItem>
</List>

**4. Circle**

<List type="bullet">
  <ListItem>Easing in and easing out</ListItem>
</List>

## Adding Keyframes

There are several ways to create keyframes in Lottie Creator.

### Keyboard Shortcuts (Fastest Method)

<List type="bullet">
  <ListItem>**P** - Position keyframe</ListItem>
  <ListItem>**S** - Scale keyframe</ListItem>
  <ListItem>**R** - Rotation keyframe</ListItem>
  <ListItem>**T** - Opacity (Transparency) keyframe</ListItem>
  <ListItem>**K** - Open Animate Properties modal (all properties)</ListItem>
</List>

### Property Panel Keyframe Button

1. Select layer
2. Navigate to the property panel (right sidebar)
3. Find property you want to animate (Position, Scale, etc.)
4. Click **keyframe diamond button** next to property
5. Keyframe created at current playhead position

### Timeline Left Sidebar

To the right of each track in the timeline left sidebar, there are also keyframe buttons to toggle keyframes.

### First Keyframe Behavior

**Initial Setup:**

<List type="bullet">
  <ListItem>
    When you add the first keyframe to a property:

    <List type="bullet">
      <ListItem>Property becomes "animated" (shows diamond icon)</ListItem>
      <ListItem>Current value is preserved</ListItem>
      <ListItem>Property track appears in timeline (when layer expanded)</ListItem>
    </List>
  </ListItem>
</List>

**Subsequent Keyframes:**

<List type="bullet">
  <ListItem>Change property value at different times</ListItem>
  <ListItem>Each change creates new keyframe automatically</ListItem>
  <ListItem>Or use keyframe button to explicitly add keyframe</ListItem>
</List>

## Selecting Keyframes

Work with keyframes efficiently by mastering selection.

### Single Selection

**Click to Select:**

<List type="bullet">
  <ListItem>Click any keyframe diamond in timeline</ListItem>
  <ListItem>Selected keyframe highlights</ListItem>
  <ListItem>Property value shown in property panel</ListItem>
</List>

### Multiple Selection

**Add to Selection:**

<List type="bullet">
  <ListItem>**Shift + Click** - Add keyframe to selection</ListItem>
  <ListItem>Works across multiple properties and layers</ListItem>
  <ListItem>All selected keyframes highlight</ListItem>
</List>

**Marquee Selection:**

<List type="bullet">
  <ListItem>Click and drag on timeline keyframe area</ListItem>
  <ListItem>Rectangle selects all keyframes inside</ListItem>
  <ListItem>Useful for selecting keyframe ranges</ListItem>
</List>

**Select All Keyframes:**

<List type="bullet">
  <ListItem>Select layer in timeline</ListItem>
  <ListItem>**Cmd/Ctrl + A** - Selects all keyframes on that layer</ListItem>
  <ListItem>Works for current property track if expanded</ListItem>
</List>

## Moving Keyframes

Adjust animation timing by repositioning keyframes.

### Dragging Keyframes

**Basic Movement:**

1. Click and hold keyframe diamond
2. Drag left (earlier) or right (later)
3. Release to drop at new time
4. Snaps to frame grid

### Multi-Keyframe Movement

**Moving Multiple Together:**

1. Select multiple keyframes (Shift+Click or marquee)
2. Drag any selected keyframe
3. All selected keyframes move together
4. Maintains relative timing between them

### Collision Handling

**Overlapping Keyframes:**

<List type="bullet">
  <ListItem>
    If you move keyframe to time where one already exists:

    <List type="bullet">
      <ListItem>Existing keyframe is removed</ListItem>
      <ListItem>Moved keyframe takes its place</ListItem>
    </List>
  </ListItem>

  <ListItem>Prevents duplicate keyframes at same time</ListItem>
</List>

## Retiming Keyframes

Scale animation duration by stretching or compressing keyframe spacing.

### Retiming Mode

1. Select multiple keyframes (at least 2)
2. **Shift + Drag** the first or last keyframe in selection
3. Other keyframes scale proportionally
4. Release to apply

## Keyframe Assistant

Powerful tools for editing multiple keyframes at once.

### How to Use

1. Select more than 2 keyframes
2. Right-click and select **Keyframe Assistant**
3. Choose an option:

**Retiming Keyframes**

<List type="bullet">
  <ListItem>Scales timing between keyframes proportionally</ListItem>
  <ListItem>Stretches or compresses animation duration</ListItem>
</List>

**Evenly Distribute Keyframes**

<List type="bullet">
  <ListItem>Spaces keyframes equally between first and last</ListItem>
</List>

**Mirror/Reverse Keyframes**

<List type="bullet">
  <ListItem>Reverses keyframe order and timing</ListItem>
  <ListItem>Creates mirror effect of animation</ListItem>
</List>

## Optimize Keyframes

The Keyframe Optimizer is an intelligent keyframe reduction system that streamlines animations and reduces timeline clutter. It removes redundant keyframes while preserving the overall shape of the animation — useful for cleaning up baked or imported frame-by-frame data without meaningfully changing how the motion looks.

### How to Access

1. Select the keyframes you want to optimize (use **Cmd/Ctrl + A** on the property track, or marquee select a range)
2. Right-click and choose **Simplify Keyframes** from the **Keyframe Assistant** menu

### Two Workflow Options

**Optimize Keyframe**
Applies optimization immediately using default settings — no configuration needed. Good for a fast cleanup pass.

**Advanced Keyframe Optimizer**
Opens the full optimizer dialog with customizable controls:

<List type="bullet">
  <ListItem>
    **Tolerance slider** — lower values stay closer to the original; higher values remove more keyframes
  </ListItem>

  <ListItem>
    **Simplification mode** — toggle between **Value** mode (optimizes based on property value changes) and **Time**
    mode (optimizes based on timing intervals)
  </ListItem>

  <ListItem>**Real-time preview** — shows exactly how many keyframes will be removed before you apply</ListItem>
</List>

### Supported Property Types

Works with all standard animated properties: position, scale, rotation, opacity, and more. Automatically skips complex types like gradients and bezier paths.

### When to Use It

<List type="bullet">
  <ListItem>After importing a baked or frame-by-frame animation to reduce file size</ListItem>
  <ListItem>When a property track has redundant keyframes that don't meaningfully change the motion</ListItem>
  <ListItem>To reduce timeline clutter before handing off to a developer</ListItem>
</List>

**Note:** Use the real-time preview to compare before committing. Once applied, use **Cmd/Ctrl + Z** to undo.

## Copying and Pasting Keyframes

Reuse keyframe values and timing across properties and layers.

### Copy/Paste Operations

**Context Menu Method:**

1. Right-click selected keyframe(s)
2. Choose **Copy Keyframes**
3. Move playhead to target location
4. Right-click in timeline
5. Choose **Paste Keyframes**

**Keyboard Shortcuts:**

<List type="bullet">
  <ListItem>**Cmd/Ctrl + C** - Copy selected keyframes</ListItem>
  <ListItem>**Cmd/Ctrl + V** - Paste at playhead position</ListItem>
</List>

### Duplicating While Moving

**Alt/Option + Drag to Duplicate:**

1. Select keyframes
2. Hold **Alt** or **Option** while dragging
3. Creates copies at new position
4. Original keyframes stay in place

## Motion Path

Set position keyframes and your object's trajectory becomes a visible, editable path on the canvas.

<List type="bullet">
  <ListItem>Drag the handles to curve and reshape the route between any two keyframes</ListItem>
  <ListItem>Toggle auto-orient to keep your object facing the direction it's traveling as it moves</ListItem>
</List>

## Deleting Keyframes

Remove keyframes to simplify animations or change behavior.

### Single Keyframe Deletion

**Delete Methods:**

<List type="bullet">
  <ListItem>Select keyframe and press **Delete**</ListItem>
  <ListItem>Right-click keyframe → **Delete Keyframe**</ListItem>
</List>

### Multiple Keyframe Deletion

**Batch Deletion:**

<List type="bullet">
  <ListItem>Select multiple keyframes (Shift+Click or marquee)</ListItem>
  <ListItem>Press **Delete**</ListItem>
  <ListItem>All selected keyframes removed</ListItem>
</List>