Animation Blending

Two clips on the same Animator: crossFadeFrom switches smoothly between Bounce and Spin.

THREE.js migration page CPU rasterizer guide

Controls

Active Clip

Benchmark

Runs fixed workloads with warmup frames, repeated samples, p50/p95 FPS and frame timing, workload counters, pipeline timings, and JSON output.

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

const animator = new EASEL.Animator(box);

const bounceAction = animator.clipAction(bounceClip);
bounceAction.setLoop(LoopRepeat, Infinity);

const spinAction = animator.clipAction(spinClip);
spinAction.setLoop(LoopRepeat, Infinity);

bounceAction.play();

function switchTo(next, current) {
  next.reset();
  next.crossFadeFrom(current, 0.4);
  next.play();
}

animator.update(dt);

import * as THREE from "three";

const mixer = new THREE.AnimationMixer(box);

const bounceAction = mixer.clipAction(bounceClip);
bounceAction.setLoop(THREE.LoopRepeat, Infinity);

const spinAction = mixer.clipAction(spinClip);
spinAction.setLoop(THREE.LoopRepeat, Infinity);

bounceAction.play();

function switchTo(next, current) {
  next.reset();
  next.crossFadeFrom(current, 0.4);
  next.play();
}

mixer.update(dt);