Timeline Mode
Keyframes & Properties
The four keyframe types, 90+ animatable properties, and how to add, select, and move keyframes.
What are keyframes?
A keyframe marks a specific value of a property at a specific point in time. MotionKit interpolates between keyframes to create smooth animation. Place two keyframes with different values and MotionKit fills in all the frames in between.
Four keyframe types
MotionKit supports four distinct types of keyframes, each for different kinds of animation:
1. Property keyframes
The most common type. Property keyframes store a numeric value and interpolate smoothly between keyframes using easing curves. These cover the vast majority of animation — position, rotation, scale, opacity, and more.
2. Morph keyframes
Store the complete vector path data of a shape. Between keyframes, MotionKit interpolates individual control points to create smooth shape morphing. See Vector Morphing.
3. Text keyframes
Store a complete text state — content plus per-segment styling (font size, color, letter spacing, line height, decoration). Between keyframes, numeric properties interpolate smoothly while content can snap or use typewriter effects. See Text Animation.
4. Discrete keyframes
Instant-switch keyframes with no interpolation. The value jumps immediately at the keyframe time. Used for properties that can't be smoothly interpolated:
- Visibility — show/hide a layer
- Blend mode — Normal, Multiply, Screen, etc.
- Constraints — horizontal/vertical constraint type
- Clip content — toggle frame clipping
- Layer order — z-index within the parent
- Text content — the actual string content
- Text alignment — left, center, right, justify
- Text decoration — none, underline, strikethrough
- Text case — original, uppercase, lowercase, title
- Auto-resize — text auto-resize behavior
Animatable properties
MotionKit supports 90+ animatable properties organized into groups:
Transform
| Property | Description |
|---|---|
| Position X | Horizontal position (anchor-based) |
| Position Y | Vertical position (anchor-based) |
| Rotation | Degrees, shortest-path interpolation |
Size
| Property | Description |
|---|---|
| Width | Scale relative to baseline width |
| Height | Scale relative to baseline height |
Appearance
| Property | Description |
|---|---|
| Opacity | 0–100% |
| Corner Radius | All corners or individual corners |
| Corner Smoothing | iOS-style smooth corners |
Fill
| Property | Description |
|---|---|
| Fill R / G / B | Red, green, blue channels (0–1) |
| Fill Opacity | Fill transparency |
Stroke
| Property | Description |
|---|---|
| Stroke Weight | Stroke thickness in pixels |
| Stroke R / G / B | Stroke color channels |
| Stroke Opacity | Stroke transparency |
Effects
Each effect type (Drop Shadow, Inner Shadow, Layer Blur, Background Blur) has its own sub-group with animatable properties:
| Property | Description |
|---|---|
| Blur Radius | Blur strength |
| Shadow Offset X / Y | Shadow position |
| Shadow Spread | Shadow size expansion |
| Shadow R / G / B | Shadow color |
| Shadow Opacity | Shadow transparency |
Text
| Property | Description |
|---|---|
| Font Size | Text size in points |
| Letter Spacing | Space between characters |
| Line Height | Vertical line spacing |
| Paragraph Spacing | Space between paragraphs |
Working with keyframes
Adding keyframes
- Recording — enable recording (R), move the playhead, modify properties in Figma. Keyframes are created automatically.
- Manual — select a layer, position the playhead, press K to add a keyframe at the current values.
Selecting keyframes
- Click — select a single keyframe.
- Shift + Click — add to selection.
- Box select — drag on empty space to select a range.
- ⌘/Ctrl + A — select all keyframes.
Moving keyframes
- Drag — click and drag selected keyframes to move in time.
- Shift + ← / → — nudge selected keyframes by one frame.
- Snapping — when enabled (S), keyframes snap to other keyframes and frame boundaries.
Clipboard
- ⌘/Ctrl + C — copy selected keyframes.
- ⌘/Ctrl + V — paste at the playhead position.
- ⌘/Ctrl + X — cut selected keyframes.
- ⌘/Ctrl + D — duplicate selected keyframes.
Context menu
Right-click any keyframe to access the context menu with options for easing, delete, copy, paste, select all, and more.