Keyframes and easing

Adding keyframes

• Select an object.
• Open the Animation tab.
• Pick a phase (In, Loop or Out).
• Click Add keyframe at the desired time, then set the property values.
• Add more keyframes to build the sequence.

A common pattern for an "in" animation:

1. Keyframe at 0 ms: opacity 0, X offset -100.
2. Keyframe at 400 ms: opacity 1, X offset 0.

Easing

Each keyframe pair has an easing curve that controls how values interpolate between them.

• Linear — constant speed. Good for crawls and continuous motion.
• Ease-in / ease-out / ease-in-out — accelerate, decelerate or both. Most UI-feeling motion uses ease-out.
• Cubic bezier — custom curve with two handles. Match broadcast-style motion by pulling the first handle forward.

Previewing

The editor's playhead runs through the selected phase in real time when you press Space with the object selected. Scrub the playhead with the mouse for frame-by-frame control.