A keyframe is a marker on the timeline that records the value of one property at one moment in time — for example, the position of a layer at the 1-second mark. Place two or more keyframes with different values, and Alight Motion fills in everything in between. That is animation in its simplest form: you only set the important poses, and the app generates the frames between them.
This guide explains how to use keyframes in Alight Motion step by step: what they control, how to add them, how timing and easing work, a simple practice project, and how to fix the mistakes almost every beginner makes. If you are completely new to the app, start with our complete Alight Motion guide first, then come back here.
What a keyframe actually is
Think of a keyframe as a pin you drop on the timeline that says: “at this exact frame, this property must look exactly like this.” Between two pins, Alight Motion calculates the in-between states automatically — a process called interpolation.
- Keyframe 1 (0.0s): text layer sits off-screen to the left.
- Keyframe 2 (1.0s): same text layer sits in the center of the screen.
- Result: the text slides from left to center over one second — you never drew the 30 frames in between.
That is the whole idea. Everything else — timing, easing, curves — is about controlling how the app travels between your pins. Understanding this single concept puts you ahead of most beginners who tap buttons without knowing what they are asking the app to do.
What keyframes control in Alight Motion
Keyframes in Alight Motion work with layer properties — the same properties you find in each layer’s settings panel. According to the official Alight Motion Help Center article on easing curves, keyframes appear on the timeline as solid white diamonds, and you can animate:
| Property | What it animates | Typical use |
|---|---|---|
| Location / Position | Where the layer is on screen | Slide-ins, bounces, follow paths |
| Scale | How big the layer is | Pop-in effects, zooms, pulses |
| Rotation | The layer’s angle | Spins, wobbles, tilts |
| Opacity | How transparent the layer is | Fade-ins, fade-outs, flicker |
| Color | Color values of supported properties | Color transitions, flashes |
Important detail: each property has its own set of keyframes. A keyframe on Position does nothing to Opacity. When an animation “isn’t working,” the most common cause is that the keyframes are on a different property than the one you just changed. Always check which property you are editing.
How to add keyframes: the basic workflow
Here is the exact workflow for a simple animation. Follow it once and the logic clicks permanently:
- Select the layer you want to animate on the timeline.
- Move the playhead to the point where the animation should start (for example, 0.0s).
- Open the property you want to animate (for example, Transform → Position) and tap the diamond add-keyframe button to record the starting value. This is your first pin.
- Move the playhead to where the animation should end (for example, 1.0s).
- Change the property value — drag the layer to its new position. Alight Motion records a second keyframe automatically at the playhead.
- Scrub back and press play. The layer now moves between the two values.
The rule to remember: the playhead decides when, the value you set decides what. Most “my keyframe didn’t do anything” moments come from setting a value while the playhead sits somewhere unexpected, or changing a value without a keyframe recorded first.
Timing: the distance between keyframes is the speed
Beginners obsess over which buttons to press and ignore timing — but timing is what makes animation feel right. The rule is simple:
- Keyframes close together → fast, snappy motion (a punch, a pop).
- Keyframes far apart → slow, smooth motion (a drift, a gentle zoom).
Moving an existing keyframe left or right on the timeline retimes the animation without changing what it does. When something feels “off,” try adjusting keyframe spacing before touching anything else — it fixes more animations than any preset.
Easing and the curve editor
By default, Alight Motion moves between keyframes at a constant speed — mechanical and lifeless. Easing changes how speed is distributed: slow start, fast middle, gentle stop, and so on. This is the difference between amateur and professional-looking motion.
Alight Motion includes a curve (graph) editor for this. These details are confirmed in the official Help Center article on animation easing curves:
- Open it with the curve editor icon while keyframes are selected.
- The vertical white line is the playhead; you can drag the view left and right.
- The X axis is the original project time and the Y axis is the resulting value — the curve shows how the value changes over time.
- There is a separate easing curve between each pair of keyframes, and you can also set one curve for the whole selection.
- Presets sit on the right side; you can also drag the white handles to shape the curve by hand.
Easing presets worth knowing
- Ease In / Ease Out / Ease In-Out: the everyday workhorses. Ease Out (fast start, gentle stop) suits objects arriving on screen; Ease In suits objects leaving.
- Bounce: the value bounces like a ball at the end of the motion.
- Elastic: overshoots the target and wobbles back, like a spring.
- Cyclic, Random, Steps, Elastic Steps: advanced presets for looping, jittery, stepped, or springy-stepped motion — available when the advanced easing option is on.
Two more verified features from the same official article: you can allow the curve to overshoot its target (enable it from the ••• overflow menu), and you can copy a curve and paste it onto other keyframes — including “Paste Curve to All Keyframes” — so you only design an easing once and reuse it everywhere.
Copying and reusing keyframes
You rarely need to build the same animation twice. Once you have keyframes you like:
- Copy the easing curve and paste it onto other keyframes (or all keyframes at once) so repeated animations feel consistent.
- Duplicate the layer to reuse a whole animation on new text or shapes, then just swap the content.
- Save finished animations as reusable elements (such as presets or project templates) when you find yourself rebuilding the same intro repeatedly.
Consistency is a quiet professional habit: using the same ease-out curve on every text entrance makes an edit feel designed instead of random.
Practice project: your first smooth text animation
Do this once, end to end. It takes five minutes and teaches positioning, timing, and easing together:
- Create a new project and add a text layer with any short word.
- At 0.0s, position the text just below the visible screen area and add a Position keyframe.
- Move the playhead to 0.8s, drag the text to the center of the screen — the second keyframe is recorded automatically.
- Open the curve editor and apply an Ease Out preset between the two keyframes, so the text arrives fast and settles gently.
- At 2.0s, add an Opacity keyframe at 100%; at 2.5s, set Opacity to 0% for a clean fade-out.
- Play it back. Then experiment: change 0.8s to 0.4s and feel how timing changes the energy.
If the motion looks robotic, the fix is almost always easing, not more keyframes. If it looks wrong in a different way, the next section covers why.
Common beginner mistakes
- Keyframes on the wrong property. You animated Position but edited Scale — nothing appears to happen. Check which property has the diamonds.
- Setting values with the playhead in the wrong place. The value lands at whatever time the playhead shows, not where you intended.
- Too many keyframes. Beginners add a keyframe every few frames “to be safe.” Each extra keyframe is a new constraint that fights smooth interpolation — fewer, well-placed keyframes almost always look better.
- Keyframes stacked nearly on top of each other. Two keyframes a frame apart with different values create violent jitter. Zoom into the timeline and spread them out.
- No easing anywhere. Linear motion on every animation is the fastest way to look like a beginner. Add ease-out to entrances at minimum.
- Animating everything at once. Ten layers moving simultaneously is visual noise. Stagger entrances by a few frames so the eye can follow.
- Moving the layer instead of keyframing it. Dragging a layer with no keyframes just repositions it statically — nothing will move during playback.
Making your motion smoother
- Default to Ease Out for anything entering the screen, Ease In for anything leaving.
- Give motion room: slightly longer durations with gentle easing read as “smooth”; very short durations read as “snappy” — choose deliberately.
- Reuse one curve (copy/paste curve) across similar animations for a consistent feel.
- Use overshoot sparingly: a small overshoot on a pop-in adds life; on every element it becomes chaos.
- Preview at full speed. Scrubbing slowly lies to you — always judge timing during real-time playback.
When your animation misbehaves
- Nothing moves: confirm keyframes exist on the intended property, that the two values actually differ, and that the playhead range covers both keyframes.
- It jumps or snaps: look for two keyframes nearly overlapping on the timeline, or a value accidentally set far from the others.
- It eases the wrong way: check the curve direction between that specific keyframe pair — each pair has its own curve.
- Playback stutters but the animation is fine: that is usually preview performance, not your keyframes. Lower the preview quality and re-check.
- Export looks different from preview: see our export troubleshooting guide, and double-check your export settings (resolution and frame rate especially).
For anything beyond keyframes — crashes, missing media, playback errors — the Alight Motion troubleshooting guide covers the broader fixes.
Keep learning
Keyframes are the foundation; effects, blending, and camera moves all build on the same idea of “values changing over time.” When you are comfortable with the workflow above, the official Alight Motion Help Center and the official Alight Motion YouTube channel’s animation tutorials are the most reliable places to go deeper — they document the current interface as it ships. And if you want the full app walkthrough again, our how to use Alight Motion hub ties every skill together.
Sources consulted
- Alight Motion Help Center — Animation Easing Curves (keyframe appearance, curve editor, presets, overshoot, copy/paste curve)
- Alight Motion Help Center — I can’t export my project. What should I do? (export settings access)
- Official Alight Motion YouTube channel — “Animating In Alight Motion” tutorial series