The Animation Timeline: Where Magic Happens

The Timeline is the heart of every animation. It’s where you tell Brinimate when an object should appear, how long it should stay, and when it should change. Understanding the Timeline deeply is the single most important skill in animation production.

🎬 Key Concepts

Before touching the buttons, understand these terms:

Term	Definition
Frame	A single “photo” in your animation. At 24 FPS, there are 24 frames per second.
Keyframe (F6)	A frame where you manually define a specific pose or state of an object.
Extend Frame (F5)	Copies the previous keyframe’s content forward, holding the drawing without change.
Layer	One row in the Timeline. Each object or group typically lives on its own layer.
Tween	Automated in-between frames calculated by Brinimate between two keyframes.

🕹️ The Timeline Panel

The Timeline lives at the bottom of the editor. It contains:

Layer list (left column): Names of all your layers. Double-click to rename.
Frame track (right area): The horizontal track where frames and keyframes live.
Playhead: The vertical line indicating the current frame.
Playback controls: Play, Pause, rewind, set loop range.

On mobile, the Timeline opens as a bottom sheet and uses larger cells for touch accuracy. Long button rows wrap automatically so nothing falls off-screen.

📍 Inserting a Keyframe (F6)

A keyframe captures the current state of the layer at a specific frame number.

To insert:

Click on the frame number where you want the keyframe (in the layer’s track).
Press F6 or right-click → Insert Keyframe.
A small filled diamond appears on that frame.
Now draw or modify your object — that state is “locked” to this keyframe.

Rule of thumb: Every time your object needs to be in a different position, size, rotation, or appearance, add a new keyframe there.

↔️ Extending a Frame (F5)

Sometimes you don’t want an object to change — you just want it to stay on screen longer. That’s what F5 is for.

To extend:

Click any frame after your last keyframe.
Press F5 or right-click → Extend Frame.
The previous keyframe’s drawing appears on all frames up to that point.

Example: Your character draws their hand from frame 1 to frame 10. Then you want the hand to hold still from frame 10 to frame 30. Click frame 30 and press F5. Done.

🎞️ Multi-Layer Animation

Real animations have multiple layers:

Background (static or slow-moving)
Character body
Character arms (separate layers for left/right)
Character head
Props and effects in front

Each layer has its own independent timeline track. This means:

The background can stay on F5 “hold” while the character does a complex walk cycle above it.
You can mute or lock individual layers without affecting others.

Tip: Name your layers descriptively from the start. arm_left, arm_right, eye_blink, bg_clouds — this makes navigating a 50-layer animation scene manageable.

⏱️ Frame Rate and Timing

The default feel of your animation depends on when you place keyframes:

Keyframes close together (1-3 frames apart): Fast, snappy action.
Keyframes farther apart (8-12 frames apart): Slow, weighted movement.
F5 holds in between: Character “pauses” — great for dialogue or contemplation moments.

A classic walk cycle in Brinimate:

Frame 1: Left foot forward.
Frame 6: Right foot forward.
Frame 12: Back to left foot (loop point).

Set it to loop and you have a smooth walk forever.

💡 Pro Tip: Plan your animation on paper before touching the timeline. Sketch a rough “exposure sheet” (or X-sheet) — a table listing what happens at each key frame for each layer. 10 minutes of planning saves 2 hours of deleting and re-inserting keyframes. Even experienced animators do this.

Next, learn how to make objects move smoothly between keyframes automatically in the Motion Tween guide.