Keyframes and easing
Edit the steps of an animation and shape how it speeds up and slows down.
A keyframe is a value at a moment. Between two keyframes the layer moves from one value to the next, and easing sets how. Open a row's settings to edit both.
Edit keyframes
Open a row
On the Animate tab, click an animation row such as Position Y.
Retime the whole animation
Delay moves the start and Length stretches it. Both are in milliseconds.
Edit the keyframe list
Each line has a time in ms and a value. Two keyframes are labelled From and To, and longer lists are numbered. Choose Add keyframe to add one 250 ms after the last, with the same value. Remove keyframe deletes one, but a row keeps at least one.
Choose an easing
Easing applies one curve to every step. Each keyframe after the first also has its own curve button, for the step leading into it.
Easing options
| Easing | Feel |
|---|---|
| Linear | Constant speed |
| Ease in | Slow start |
| Ease out | Fast start, slow finish |
| Ease in-out | Slow at both ends |
| Overshoot | Goes past the value, then settles back |
| Anticipate | Pulls back first, then moves |
| Custom curve | Drag the handles of the curve editor |
Hold
Open a keyframe's curve button and choose Hold to make the step jump. The value stays where it was until that keyframe's time, then changes at once. Use it for a layer that should appear without fading.
Try it
Add Position Y to the Price. Open its row and choose Add keyframe. You now have 40, 0 and 0. Change the second to -20, so the price rises past its place and settles at 0. Set Easing to Overshoot and play.
Next
- The timeline edits the same keyframes by dragging.
- Animate any property
- Set the still moment
Updated 1 Nov 2026