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

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

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:

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

Multi-Keyframe Movement

Moving Multiple Together:

Select multiple keyframes (Shift+Click or marquee)
Drag any selected keyframe
All selected keyframes move together
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

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

Keyframe Assistant

Powerful tools for editing multiple keyframes at once.

How to Use

Select more than 2 keyframes
Right-click and select Keyframe Assistant
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

Copying and Pasting Keyframes

Reuse keyframe values and timing across properties and layers.

Copy/Paste Operations

Context Menu Method:

Right-click selected keyframe(s)
Choose Copy Keyframes
Move playhead to target location
Right-click in timeline
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:

Select keyframes
Hold Alt or Option while dragging
Creates copies at new position
Original keyframes stay in place

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

Keyframes