Keyframe Animation

AnimationClip with VectorTracks drives position and scale. action.timeScale controls playback speed.

Controls

Speed

0.1
3
import * as EASEL from "easel";
import { LoopRepeat } from "easel";

// VectorTrack(property, times[], values[], itemSize)
// times: keyframe timestamps in seconds
// values: flat array - itemSize values per keyframe
const posTrack = new EASEL.VectorTrack(
  "position",
  [0,   0.5,   1  ],
  [0,0,0,  0,3,0,  0,0,0],  // y: 0 → 3 → 0
  3,
);

const scaleTrack = new EASEL.VectorTrack(
  "scale",
  [0,     0.5,     1  ],
  [1.2,0.7,1.2,  0.8,1.4,0.8,  1.2,0.7,1.2],
  3,
);

const clip     = new EASEL.AnimationClip("bounce", 1, [posTrack, scaleTrack]);
const animator = new EASEL.Animator(box);
const action   = animator.clipAction(clip);
action.setLoop(LoopRepeat, Infinity);
action.timeScale = speed;   // speed slider maps directly to timeScale
action.play();

// Call once per frame - drives all active clips on this animator
animator.update(dt);