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:

  • •The software automatically calculates in-between values
  • •Creates smooth transitions without manual frame-by-frame animation
  • •Easing controls how the interpolation happens

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:

  • •Transform: Position, Scale, Rotation, Skew, Skew Axis
  • •Appearance: Opacity, Fill Color, Stroke Color, Stroke Width
  • •Shape-specific: Size, Roundness, Points, Radius
  • •Path: Trim Path (Start, End, Offset)
  • •Gradient: Colors and positions

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

  • •Easing in but no easing out
  • •Applies to the starting keyframe

2. Arrow Left

  • •Easing out but no easing in

3. Diamond

  • •Standard keyframe
  • •No easing

4. Circle

  • •Easing in and easing out

Adding Keyframes

There are several ways to create keyframes in Lottie Creator.

Keyboard Shortcuts (Fastest Method)

  • •P - Position keyframe
  • •S - Scale keyframe
  • •R - Rotation keyframe
  • •T - Opacity (Transparency) keyframe
  • •K - Open Animate Properties modal (all properties)

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:

  • •

    When you add the first keyframe to a property:

    • •Property becomes "animated" (shows diamond icon)
    • •Current value is preserved
    • •Property track appears in timeline (when layer expanded)

Subsequent Keyframes:

  • •Change property value at different times
  • •Each change creates new keyframe automatically
  • •Or use keyframe button to explicitly add keyframe

Selecting Keyframes

Work with keyframes efficiently by mastering selection.

Single Selection

Click to Select:

  • •Click any keyframe diamond in timeline
  • •Selected keyframe highlights
  • •Property value shown in property panel

Multiple Selection

Add to Selection:

  • •Shift + Click - Add keyframe to selection
  • •Works across multiple properties and layers
  • •All selected keyframes highlight

Marquee Selection:

  • •Click and drag on timeline keyframe area
  • •Rectangle selects all keyframes inside
  • •Useful for selecting keyframe ranges

Select All Keyframes:

  • •Select layer in timeline
  • •Cmd/Ctrl + A - Selects all keyframes on that layer
  • •Works for current property track if expanded

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:

  • •

    If you move keyframe to time where one already exists:

    • •Existing keyframe is removed
    • •Moved keyframe takes its place
  • •Prevents duplicate keyframes at same time

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

  • •Scales timing between keyframes proportionally
  • •Stretches or compresses animation duration

Evenly Distribute Keyframes

  • •Spaces keyframes equally between first and last

Mirror/Reverse Keyframes

  • •Reverses keyframe order and timing
  • •Creates mirror effect of animation

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:

  • •

    Tolerance slider — lower values stay closer to the original; higher values remove more keyframes

  • •

    Simplification mode — toggle between Value mode (optimizes based on property value changes) and Time mode (optimizes based on timing intervals)

  • •Real-time preview — shows exactly how many keyframes will be removed before you apply

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

  • •After importing a baked or frame-by-frame animation to reduce file size
  • •When a property track has redundant keyframes that don't meaningfully change the motion
  • •To reduce timeline clutter before handing off to a developer

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:

  • •Cmd/Ctrl + C - Copy selected keyframes
  • •Cmd/Ctrl + V - Paste at playhead position

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.

  • •Drag the handles to curve and reshape the route between any two keyframes
  • •Toggle auto-orient to keep your object facing the direction it's traveling as it moves

Deleting Keyframes

Remove keyframes to simplify animations or change behavior.

Single Keyframe Deletion

Delete Methods:

  • •Select keyframe and press Delete
  • •Right-click keyframe → Delete Keyframe

Multiple Keyframe Deletion

Batch Deletion:

  • •Select multiple keyframes (Shift+Click or marquee)
  • •Press Delete
  • •All selected keyframes removed
Last updated: May 5, 2026 at 5:55 AMEdit this page
Previous

Timeline

Next

Easing