Motion

Keyframe Timeline

What this shows

Scrub a keyed prop through position, rotation, and scale tracks.

This example needs a Canvas2D-capable browser.

Loading scene…

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";

const clip = new EASEL.AnimationClip("keyframes", 2.4, [
  new EASEL.NumberTrack("position.y", [0, 0.6, 1.2, 1.8, 2.4], [0.8, 1.8, 0.8, 1.8, 0.8]),
  new EASEL.NumberTrack("rotation.y", [0, 2.4], [0, Math.PI * 2]),
]);

const animator = new EASEL.Animator(mesh);
animator.clipAction(clip).setLoop(EASEL.Loop.Repeat, Number.POSITIVE_INFINITY).play();
animator.update(delta);