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);