Motion

Coordinated Motion

What this shows

Keep several moving parts in sync with one animation group.

Loading scene…

Key API excerpt

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

const group = new EASEL.AnimationGroup(meshA, meshB, meshC, meshD);
const spin = new EASEL.AnimationClip("spin", 2.8, [
  new EASEL.NumberTrack("rotation.y", [0, 1.4, 2.8], [0, Math.PI, Math.PI * 2]),
]);
const bounce = new EASEL.AnimationClip("bounce", 1.4, [
  new EASEL.NumberTrack("position.y", [0, 0.7, 1.4], [0.7, 1.55, 0.7]),
]);

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