Kalpana Docs
Kalpana Designer Studio

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

EasingFeel
LinearConstant speed
Ease inSlow start
Ease outFast start, slow finish
Ease in-outSlow at both ends
OvershootGoes past the value, then settles back
AnticipatePulls back first, then moves
Custom curveDrag 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

Was this page helpful?

Updated 1 Nov 2026

On this page