Advanced Features
Text Animation
Per-segment text keyframing — style interpolation, typewriter effects, and counter animations.
How text animation works
MotionKit's text animation system goes beyond simple opacity fades. It captures a complete TextState at each keyframe — the full text content plus per-segment styling — and interpolates between states for smooth transitions.
What is a TextState?
A TextState is a snapshot of the entire text appearance at a moment in time. It includes:
- Content — the actual string text
- Segments — the text broken into styled ranges, each with:
- Font family and style (e.g., Inter, Bold)
- Font size
- Letter spacing
- Line height
- Fill color (R, G, B) and opacity
- Text decoration (none, underline, strikethrough)
- Text case (original, upper, lower, title)
Interpolation modes
Same content — style interpolation
When two keyframes have the same text content, MotionKit interpolates the style properties smoothly per segment:
- Font size slides from one value to another.
- Colors transition smoothly in RGB space.
- Letter spacing and line height interpolate.
- Fill opacity fades.
This enables effects like color waves, size pulses, and per-character style transitions.
Different content — typewriter modes
When keyframes have different text content, MotionKit offers three typewriter modes:
| Mode | Description |
|---|---|
| Forward | Characters reveal left-to-right, like typing. |
| Backward | Characters remove right-to-left, like deleting. |
| Smart | Auto-detects: if the target has more characters → forward (typing); if fewer → backward (deleting). |
Without a typewriter mode, content simply snaps at the midpoint — the old text shows for the first half, then switches to the new text.
Per-segment animation
Different parts of a text node can animate independently — one word changes color while another changes size. MotionKit uses Figma's getRangeFont* APIs to capture per-character styling differences.
Workflow
- Select a text layer and enable recording.
- Set the playhead to the start time — the initial text state is captured.
- Move the playhead forward and change text properties in Figma.
- A text keyframe is created automatically. Preview to see the result.
Text as property tracks
In addition to the full TextState system, individual text properties can also be animated as standard property tracks:
- Font size (uniform across the text node)
- Letter spacing
- Line height
- Paragraph spacing
The Characters property track displays the text content as a number, enabling counter-style animations (e.g., animating a number from 0 to 100).
Discrete text properties
Some text properties are handled as discrete keyframes — they switch instantly rather than interpolating:
- Text alignment (left, center, right, justify)
- Text decoration (none, underline, strikethrough)
- Text case (original, uppercase, lowercase, title)
- Auto-resize behavior
- Text content (the string itself)