What Are Keyframes?
Keyframes are the foundation of all animation in Alight Motion. A keyframe marks a specific point in time where a layer property — like position, scale, or opacity — has a defined value. When you set two or more keyframes with different values, Alight Motion automatically calculates and generates the smooth transition between them. This process is called interpolation.
Why Keyframes Matter
Without keyframes, your elements just sit still. With them, you can:
- Make text slide onto the screen from off-canvas
- Scale a logo up or down over time
- Fade elements in and out smoothly
- Rotate shapes continuously for animated graphics
- Move elements along a custom path
How to Set a Keyframe
- Select the layer you want to animate in the timeline.
- Open the Properties Panel by tapping on the layer.
- Navigate to the property you want to animate (e.g., Position, Scale, Opacity).
- Move the playhead to your starting time.
- Tap the diamond icon (◇) next to the property to enable keyframing and set your first keyframe.
- Move the playhead forward in time to where you want the animation to end.
- Change the property value — a new keyframe is created automatically.
Press play and watch your animation come to life!
Understanding Keyframe Interpolation Types
Alight Motion gives you control over how the animation moves between keyframes. Tap a keyframe diamond on the timeline to change its interpolation:
| Type | Description | Best Used For |
|---|---|---|
| Linear | Constant, uniform speed | Mechanical or technical motion |
| Ease In | Starts fast, slows at the end | Objects coming to rest |
| Ease Out | Starts slow, speeds up | Objects launching or leaving |
| Ease In/Out | Slow start, fast middle, slow end | Natural, fluid movement |
| Hold | No transition — jumps to next value | Step animations or blinking effects |
Animating Position: A Practical Example
- Add a text layer to your project.
- Move the playhead to 0:00.
- In Properties, set Position X to -600 (off-screen left) and tap the diamond to set a keyframe.
- Move the playhead to 0:30 (half a second in at 60fps).
- Set Position X to 0 (center). A new keyframe is added automatically.
- Set both keyframes to Ease Out for a natural slide-in.
Your text will now slide in from the left smoothly.
Using the Graph Editor
For advanced control, Alight Motion includes a Graph Editor. Access it by tapping the graph icon while a keyframed property is selected. The graph shows the speed curve of your animation — steeper lines mean faster motion. You can drag the Bezier handles on the curve to create custom easing profiles that go beyond the presets.
Pro Tips for Keyframe Animations
- Offset your keyframes: Don't start all layers at the same time. Stagger them by a few frames for a polished, choreographed feel.
- Use "Ease In/Out" by default: It almost always looks more natural than Linear.
- Animate multiple properties simultaneously: Combine position, scale, and opacity keyframes for dynamic entrances.
- Copy keyframes: Long-press a keyframe to copy it and paste it elsewhere — great for repeating animations.
- Keep it subtle: Over-animation is a common beginner mistake. Less movement often means more impact.
Mastering keyframes is the single biggest skill jump you can make in Alight Motion. Once you're comfortable with them, the entire app opens up and you can create truly professional motion graphics on your mobile device.