Animation Basics

Manual position/rotation/scale animation driven by Clock.delta - no keyframes needed.

Controls

Speed

0.1
3
import * as EASEL from "easel";

// EASEL: Clock.delta is a getter, not a method.
const clock = new EASEL.Clock();
let elapsed = 0;

function animate() {
  requestAnimationFrame(animate);
  const dt = clock.delta;   // seconds since last call - getter, not getDelta()
  elapsed += dt * speed;

  box.rotation.y = elapsed * 1.2;
  box.rotation.x = elapsed * 0.4;

  box.position.y = Math.sin(elapsed * 2) * 1.5;

  const bounce = Math.sin(elapsed * 2);
  const scaleY  = 0.8 + 0.4 * ((bounce + 1) / 2);
  const scaleXZ = 1 / Math.sqrt(scaleY);
  box.scale.set(scaleXZ, scaleY, scaleXZ);

  renderer.render(scene, camera);
}
animate();