Keyframe Animation

Create smooth property animations by placing and editing keyframes on the timeline.

Keyframe Animation

Keyframe animation is the foundation of ShapeBox's animation system. You define the state of an object at specific points in time (keyframes), and ShapeBox automatically calculates smooth transitions between them.

Core concepts

TermMeaning
KeyframeA snapshot of a property value at a specific time
InterpolationHow ShapeBox transitions between two keyframe values
EasingA curve that controls how fast or slow the transition accelerates
ClipA named collection of keyframes forming a complete animation
TrackOne row in the Timeline representing one animatable property

Adding keyframes

Method 1 — Record mode

  1. Select the object in the scene.
  2. Open the Timeline and click ● Record (red button).
  3. Move the playhead to the desired frame.
  4. Change the object's transform, material, or any property — a keyframe is added automatically.
  5. Click ● Record again to stop recording.

Method 2 — Manual keyframe

  1. Move the playhead to the desired frame.
  2. In the Inspector, right-click any property and choose Insert Keyframe. — Or press K with the object selected to keyframe all currently changed properties at once.

Editing keyframes

Click a keyframe diamond in the Timeline to select it. You can then:

  • Move — drag left or right to change its time.
  • Delete — press Delete or Backspace.
  • Copy / Paste — Ctrl+C / Ctrl+V to duplicate at a new position.
  • Edit value — double-click a keyframe to open an exact-value input.

Select multiple keyframes by holding Shift and clicking, or drag-selecting a region. Multiple selected keyframes can be moved as a group.

Interpolation modes

Right-click any keyframe to change its interpolation:

ModeBehaviour
LinearConstant rate of change — abrupt starts and stops
BezierSmooth S-curve — natural-feeling motion (default)
ConstantSnaps instantly to the value — no transition
Ease InSlow at start, fast at end
Ease OutFast at start, slow at end
Ease In/OutSlow at both ends, fast in the middle

Bezier curve editor

For precise control over a Bezier keyframe, click the curve icon on the keyframe to open the Bezier handle editor. Drag the handles to shape the exact acceleration profile.

Working with multiple properties

Each animatable property gets its own track in the Timeline. Tracks are grouped by category:

▼ Transform
    Position X ────●─────────●────
    Position Y ────●──────────────
    Rotation Y ──────────────●────
▼ Material
    Opacity    ───────────●───────

Collapse or expand categories by clicking the arrow next to the group name.

Looping

In the clip settings (click the clip name in the Timeline header):

  • Loop — repeats the clip indefinitely.
  • Ping-Pong — plays forward then backward, repeating.
  • Once — plays once and stops (default).
  • Clamp — plays once and holds the final keyframe value.

Blending clips

Multiple clips on the same object can be blended via script:

import { getObject } from '@shapebox/api'

const door = getObject('Door')
door.animation.crossFade('idle', 'open', 0.5) // cross-fade over 0.5 seconds

Imported animations

GLTF and FBX models with embedded animations import automatically. Each animation in the file becomes a separate clip in the Timeline. You can edit imported keyframes just like manually created ones.

Editing an imported clip modifies only your project's copy. The original file is not changed.