Your first animation

A shape that moves, with timing that does not look like a robot. About five minutes.

We are going to move a shape across the canvas and make the motion feel deliberate. The point is not the shape — it is the three habits at the end, which are what separate animation that moves from animation that reads.

1 — Draw something#

1. Open the editor. You get a blank canvas and an empty timeline.
2. Press M for the rectangle tool and drag out a shape near the left edge.
3. Give it a fill you can see against the background.

2 — Set two keyframes#

1. Put the playhead at 0 seconds.
2. In the inspector, click the stopwatch next to Position. That records a keyframe where the shape is now.
3. Move the playhead to 1 second.
4. Drag the shape to the right side of the canvas. A second keyframe appears automatically.
5. Press space to play.

It moves. It also looks mechanical, because the default interpolation is linear — constant speed from start to stop, which nothing in the physical world does.

3 — Fix the timing#

1. Select both keyframes.
2. Apply Easy Ease. Play it again — it now accelerates and decelerates.
3. Open the graph editor.
4. Drag the first keyframe's outgoing handle further to the right.

That last step is the one that matters. Easy Ease is symmetric, which is better than linear but still generic. Real objects usually take their time getting going and stop decisively — or the reverse. The asymmetry is the character.

4 — Add secondary motion#

One object moving in one way is an animation. Two things happening at slightly different times is motion design.

1. With the shape selected, add the Inertia driver on Position.
2. Set Bounce around 3, Decay around 8, Amplitude around 0.4.
3. Play it back.

The shape now overshoots its landing and settles. You did not keyframe that — Inertia measured how fast the shape was travelling when it arrived and rang around the keyframe accordingly. Move the end keyframe further away and the overshoot grows on its own, because the shape is arriving faster.

The three habits#

• Never ship linear. It is the default, and it always looks like the default.
• Make the ease asymmetric. Slow out and fast in, or fast out and slow in. Symmetric easing is safe and forgettable.
• Let something arrive late. A shadow, a second element, a bit of overshoot. Simultaneity is what makes motion look computed.