Skip to main content

Timeline & Keyframes

The bottom-of-the-editor strip where you actually direct the motion. Frame-accurate scrubbing, four interpolation modes, onion skinning for arcs, copy/paste between frames.

Tier: Free for all (Free Style and up) Surface: Bottom of the editor viewport, always visible

What it does​

The timeline is your direct interface to the animation's keyframes. Scrub through time, see the avatar pose at each frame, add/remove/edit keyframes, control how the motion interpolates between them. This is where the actual animation work happens.

Three core capabilities:

  1. Scrubbing & playback — move through time, watch the animation play.
  2. Keyframe editing — add, delete, copy, paste, multi-select keyframes.
  3. Interpolation control — how the motion between keyframes computes.

Plus onion skinning for visualizing motion arcs (cyan past frames + magenta future frames as ghost overlays).

Scrubbing & playback​

Timeline strip​

A horizontal strip showing the animation's frame range. The current frame is marked with a vertical playhead. Drag the playhead to scrub.

Playback controls​

ControlActionShortcut
Play / PauseStart/stop playbackSpace
Loop toggleLoop on/off when reaching endLoop button
Frame step forwardMove one frame forwardRight arrow
Frame step backwardMove one frame backwardLeft arrow
Jump to startMove to frame 0Home
Jump to endMove to last frameEnd

Frame counter​

Shows current frame and total frames, e.g. 47 / 120. Click the number to type a specific frame and jump to it.

FPS readout​

Shows the clip's frame rate (e.g. 30 FPS). FPS is set per clip and influences how time-based features (Foot Locking velocity, Vision Capture import rate) compute.

Keyframes on the timeline​

Each track (per bone, per property) has its own row of keyframes. The default view shows the active bone's quaternion track keyframes as diamond markers along the timeline:

0     10     20     30     40     50
│      │      │      │      │      │
◆──────◆──────◆──────────────◆─────

Add keyframe — three ways​

1. Manual key (K shortcut)​

Press K (or click the + Key button). Creates a keyframe at the current frame for the active bone, snapshotting the bone's current pose.

2. REC mode — auto-key on the fly (Kinetiq's differential workflow)​

This is the workflow that sets Kinetiq apart from typical browser editors:

  1. Click the ● REC button in the timeline (it turns red and pulses).
  2. Select an IK target on the avatar (a hand, foot, etc.).
  3. Drag the timeline playhead to the frame you want.
  4. Drag the IK target to the new pose.
  5. A keyframe is created automatically at that frame — no K press needed.
  6. Move the playhead to another frame, drag the IK again — another keyframe auto-creates.
  7. Continue until the move is authored. Click ● REC again to exit recording mode.

The result: you author full IK-driven motion just by moving the character through key poses, without ever touching the keyframe shortcut. The auto-key captures every meaningful change while you're focused on the animation.

This is the closest thing to Maya's "Auto Key" or Blender's "Auto Keyframing" available natively in a browser, and pairs particularly well with Foot Locking running live (so you authoring an arm reach doesn't accidentally drift the planted feet).

3. Edit-then-keyframe (manipulate first, key after)​

Scrub to a frame, manipulate via the gizmo, then press K. Same result as REC mode but step-by-step. Good for precise pose authoring where you want to tweak before committing the keyframe.

Delete keyframe​

Click a diamond to select it, press Delete (or the trash icon). Removes the keyframe.

Multi-select​

  • Shift+click keyframes to add to selection.
  • Click and drag on the timeline to box-select.
  • Ctrl+A to select all keyframes for the active bone.

Copy / Paste keyframes​

  • Ctrl+C to copy selected keyframes (the per-bone pose snapshot).
  • Ctrl+V to paste at the current frame.

This is also the way to "duplicate a pose" — select all keyframes at frame 30, copy, scrub to frame 60, paste. Same pose now exists at both frames.

Edit pose at a frame​

Scrub to the frame, manipulate the bone via the gizmo (Move/Rotate/Scale tools), and the keyframe at that frame updates automatically. If no keyframe existed at that frame, one is created.

Quaternion interpolation modes​

Between two consecutive keyframes, the animation needs to compute the in-between values. For position and scale, plain linear interpolation. For quaternion (rotation) tracks, four modes are available:

Linear (default)​

Fastest, uses NLERP (Normalized Linear Interpolation) under the hood. Visually nearly identical to SLERP for short arcs (less than ~90°). Use for general work — fastest computation, smallest visible difference vs. SLERP.

Step​

No interpolation. The bone instantly snaps from keyframe value to keyframe value at the next frame. Use for:

  • Stop-motion / cutout style animation.
  • Mechanical / robotic motion.
  • Frame-by-frame hand-drawn style poses.

Bezier​

Custom tangent curves per keyframe. Specify in/out tangent handles to control the easing shape. Use for:

  • Hand-tuned ease-in / ease-out.
  • Stylized exaggeration (slow start, fast finish — or vice versa).
  • Cinematic camera moves where you want absolute control over the curve.

Squad (Spherical Quadrangle)​

Spherical Cubic interpolation — the gold standard for smooth quaternion tumbling. Equivalent to Bezier but mathematically correct on the rotation manifold. Use for:

  • Long arcs greater than 90°.
  • Rotations that need to look continuously smooth at high frame rates.
  • Cinematic rotational camera/object moves.

Set the mode per-track via the Linear / Step / Bezier / Squad dropdown in the Timeline toolbar. Position tracks always interpolate linearly (vector LERP).

Onion skinning​

Toggle past/future ghost frames as translucent overlays of the avatar in different timeline positions:

  • Cyan ghosts = past frames (where the avatar was).
  • Magenta ghosts = future frames (where the avatar will be).

This is how 2D animators visualize motion arcs — Onion Skinning brings the same workflow to 3D. Drag a knee bone, see the cyan trail showing the previous arc, the magenta trail showing the upcoming arc, and feel whether the motion has weight.

Toggle​

  • Ctrl + G — toggle onion skinning on/off.
  • Right-click 👻 button in the Timeline toolbar — cycle through 1-5 ghost frames per direction (more ghosts = more lookahead/lookbehind, but slower render).

Onion skinning auto-disables during playback for performance — you only need it during scrubbing/editing, when you're standing on a single frame examining the arc.

Loop markers​

For loopable animations (walk cycles, idles, dances), enable Loop in the timeline. Playback then wraps from the last frame back to the first instantly when reaching the end.

Pair with Loop Fixer to ensure the wrap is seamless.

Workflow — typical authoring session​

  1. Avatar loaded. Timeline shows whatever clip is active (or empty if you're starting from scratch).
  2. Scrub to frame 0. Set the starting pose (manually rotate bones via gizmos, or apply a pose preset).
  3. Press K to add a keyframe at frame 0.
  4. Scrub to frame 15. Set the next pose. Press K to keyframe.
  5. Scrub to frame 30. Set the third pose. Keyframe.
  6. ... repeat for the duration.
  7. Press Space. Watch playback.
  8. Toggle onion skinning. Spot any awkward transitions.
  9. Adjust intermediate keyframes by scrubbing to them and re-posing.
  10. (Optional) Set tracks to Squad interpolation for smoother long-arc rotations.
  11. (Optional) Run Quality Score to validate.
  12. Export when ready.

Edge cases​

Adding keyframe at a frame that already has one​

The existing keyframe is overwritten with the current pose. (No "duplicate keyframe at same time" — the timeline enforces unique-time-per-track.)

Moving keyframes by clicking and dragging​

Currently you can't drag a keyframe to a different time directly. To "move" a keyframe: copy it, paste at the new time, delete the original.

Per-track timing​

Each bone's track has its own timing. The displayed diamonds are for the active bone only. Switching bones updates the diamond display.

Very long clips​

Clips over ~600 frames (20 seconds at 30 FPS) show all keyframes but the strip becomes dense. Zoom in via the timeline zoom slider for closer scrubbing.