Keyframe Animation

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

const posTrack = new EASEL.VectorTrack(
  "position",
  [0,   0.5,   1  ],
  [0,0,0,  0,3,0,  0,0,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;
action.play();

animator.update(dt);

import * as THREE from "three";

const posTrack = new THREE.VectorKeyframeTrack(
  ".position",
  [0,   0.5,   1  ],
  [0,0,0,  0,3,0,  0,0,0],
);

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

const clip   = new THREE.AnimationClip("bounce", 1, [posTrack, scaleTrack]);
const mixer  = new THREE.AnimationMixer(box);
const action = mixer.clipAction(clip);
action.setLoop(THREE.LoopRepeat, Infinity);
action.timeScale = speed;
action.play();

mixer.update(dt);