Animation

Keyframes that hold formulas, not just numbers. Crossfade between reactive expressions. The timeline and formula systems merge into one.

---

Formula keyframes

A keyframe can hold sin(time * 3) * 50, mouse.x, or a constant. Crossfade between any combination — reactive, procedural, static. Classical tweening is the special case where every formula is a constant.

t=0: rotation = 0              // static start
t=1: rotation = mouse.x / 4   // reactive mid-point
t=2: rotation = sin(time) * 90 // procedural end

---

Independent bone timelines

Each node gets its own timeline with its own loop length. Legs loop at 2s, arms at 3s, torso breathes at 5s — all inside one clip. No nesting. No shared timeline constraints.

Walk clip
  Legs     ■■■■■■■■■□          (2s loop)
  Arms     ■■■■■■■■■■■■■□      (3s loop)
  Torso    ■■■■■■■■■■■■■■■■■□  (5s loop)

---

Mock-based blending

Animations evaluate into mock objects — preallocated property buffers — not directly into real nodes. Blend between Walk and Jump without corrupting node data. Unanimated properties pass through unchanged.

---

State capture

Current node state is captured when an animation starts, not when the component initializes. Game logic that sets head.opacity = 0 before playing Walk persists into the animation. Chained transitions (Walk to Jump to Land) capture mid-blend poses automatically.

---

Two mixing modes

Freeze-blend

Source animation freezes at its current pose. Target advances. The blend interpolates from frozen snapshot to live output over the crossfade duration.

Live-blend

Both animations keep advancing. Weight shifts gradually from source to target. Legs keep walking while the jump pose fades in.

playAnimation('jump', { duration: 0.3, mode: 'freeze' });
playAnimation('run',  { duration: 0.5, mode: 'live', sourceSpeed: 0.5 });

---

IK solvers

Three solvers built in. Two-bone analytical for arms and legs — exact solution, no iteration. CCD for tails and tentacles. FABRIK for spines and ropes. Joint constraints clamp rotation ranges per bone. IK weight is animatable — blend between keyframed pose and IK-solved pose per frame.

---

Component slots

Typed inputs on user-defined components. A Player component exposes leftFootTarget, rightFootTarget, lookAtTarget as slots. During authoring, slots create placeholder nodes for testing. At runtime, slots bind to real scene nodes. Formulas reference slots naturally — atan2($lookAtTarget.y - self.y, $lookAtTarget.x - self.x).

---

Easing

Standard presets: ease-in, ease-out, ease-in-out, bounce, elastic. Custom cubic bezier with 2 control points. Spring physics with mass, stiffness, and damping for organic motion. Steps for sprite-sheet animation. Per-property easing within the same keyframe.

---

Export formats

Three targets from one animation definition.

Format	Use case
Standalone JS	Full interactivity — formulas, events, blend logic. No editor dependency.
Lottie JSON	Web and mobile playback via the Lottie ecosystem. Classical keyframes only.
CSS @keyframes	Native web animations. Single-property, zero runtime.

---

Play mode

Press Space to play. Physics simulates, formulas tick with time, dt, frame. Animations advance on requestAnimationFrame. Press Space again — full state restores. Non-destructive testing with zero setup.

---

Why this matters

Other tools separate timeline and code. Formo merges them.

Tool	Timeline	Logic	Limitation
Flash	Frame-based keyframes	ActionScript (separate language)	Two systems that fight each other. gotoAndPlay is the only bridge.
Rive	Keyframes + blend states	Visual state machines	No formulas, no math expressions, no procedural animation.
After Effects	Keyframes + expressions	JavaScript expressions	Powerful but no interactivity. Expressions render offline only.
Formo	Formula keyframes	Same formula system	One system. Keyframes hold formulas. Timeline is reactive.

Flash kept timeline and code as parallel worlds. Rive replaced code with visual state machines — approachable but capped at simple transitions. After Effects added expressions to keyframes — powerful but locked to offline rendering. Formo starts with formulas and builds the timeline on top. No bridge needed because they are the same thing.

---

Proven foundation

Formo’s tween engine — registration, lerp functions, keyframe CRUD, easing presets — is already built and tested in the Foximation animation editor. The formula-keyframe system extends this foundation with reactive expressions, mock-based blending, and per-bone timelines.

---

Open Formo