Smooth Motion That Serves a Purpose

The Constraint: Frame Budget and Interruption

Every animation runs inside the render loop. At 60fps, each frame has 16.67ms for everything: scene updates, animation calculations, draw calls, and GPU work. An animation that consumes 5ms per frame eats 30% of the budget. Two such animations running simultaneously leave no room for anything else.

The Naive Approach

Tutorial animation code works for demos. It creates problems at scale.

GSAP for Camera and Object Transitions

GSAP (GreenSock Animation Platform) is the standard for complex, interruptible animations. It handles easing, sequencing, timeline control, and cancellation. For Three.js, it animates object properties directly.

import gsap from 'gsap';

// Smooth camera transition to focus on an object
function zoomToTarget(camera, controls, targetPosition, duration = 0.6) {
  // Kill any running camera animation first
  gsap.killTweensOf(camera.position);
  gsap.killTweensOf(controls.target);

  const offset = new THREE.Vector3(2, 2, 4);
  const destination = targetPosition.clone().add(offset);

  gsap.to(camera.position, {
    x: destination.x,
    y: destination.y,
    z: destination.z,
    duration,
    ease: 'power2.out',
    onUpdate: () => camera.updateProjectionMatrix(),
  });

  gsap.to(controls.target, {
    x: targetPosition.x,
    y: targetPosition.y,
    z: targetPosition.z,
    duration,
    ease: 'power2.out',
    onUpdate: () => controls.update(),
  });
}

The critical detail is gsap.killTweensOf() at the start. If the user clicks a new target before the previous transition completes, the old animation is cancelled instantly. Without this, animations pile up and the camera drifts erratically.

GSAP works with any numeric property on any object. Animate mesh.material.opacity for fades, mesh.scale.x for growth, mesh.rotation.y for turns. The easing library covers every common curve: power2.out for natural deceleration, elastic.out for bounce, back.out for overshoot.

Spring Physics

Springs model physical motion: an object accelerates toward a target, overshoots, oscillates, and settles. The result feels alive in a way that eased tweens cannot replicate. React Three Fiber applications use @react-spring/three for declarative spring animation.

import { useSpring, animated } from '@react-spring/three';

function DataPoint({ position, isSelected }) {
  const { scale, color } = useSpring({
    scale: isSelected ? 1.5 : 1,
    color: isSelected ? '#4b93d6' : '#6b7280',
    config: { mass: 1, tension: 280, friction: 20 },
  });

  return (
    <animated.mesh position={position} scale={scale}>
      <sphereGeometry args={[0.3, 16, 16]} />
      <animated.meshStandardMaterial color={color} />
    </animated.mesh>
  );
}

Springs handle interruption naturally: if the target changes mid-animation, the spring redirects without discontinuity. No cancellation logic needed.

For vanilla Three.js (without React), implement a simple spring solver:

function createSpring(config = {}) {
  const { stiffness = 200, damping = 20, mass = 1 } = config;
  let velocity = 0;
  let current = 0;

  return {
    update(target, delta) {
      const force = stiffness * (target - current);
      const dampForce = damping * velocity;
      const acceleration = (force - dampForce) / mass;
      velocity += acceleration * delta;
      current += velocity * delta;
      return current;
    },
    get value() { return current; },
    set value(v) { current = v; velocity = 0; },
  };
}

Skeletal Animation

GLTF models carry embedded skeletal animations: walk cycles, door openings, mechanical arm movements, assembly sequences. Three.js AnimationMixer plays, blends, and crossfades these clips.

const mixer = new THREE.AnimationMixer(model);
const clips = model.animations;

// Play a specific clip
const action = mixer.clipAction(clips.find(c => c.name === 'Open'));
action.setLoop(THREE.LoopOnce);
action.clampWhenFinished = true;
action.play();

// Crossfade between two animations over 0.3 seconds
function crossFade(fromAction, toAction, duration = 0.3) {
  toAction.reset().play();
  fromAction.crossFadeTo(toAction, duration);
}

// Update in the render loop
function animate(delta) {
  mixer.update(delta);
}

Skeletal animation is relevant to product configurators (lid opening, drawer sliding, parts assembling), digital twins (valve rotation, conveyor belt motion), and any application with mechanical or character models.

Morph Targets

Morph targets (blend shapes) animate geometry between predefined shapes. A mesh smoothly deforms from one configuration to another by interpolating vertex positions. Use cases: facial expressions, terrain deformation, data-driven shape morphing.

// GLTF models with morph targets
const mesh = model.getObjectByName('terrain');
const influences = mesh.morphTargetInfluences;

// Animate between morph targets
gsap.to(influences, {
  [0]: 0, // dry terrain
  [1]: 1, // flooded terrain
  duration: 1.5,
  ease: 'power2.inOut',
});

Morph targets are GPU-friendly: the interpolation happens in the vertex shader. The CPU cost is setting the influence values (a handful of float assignments per frame). For data visualisation, morph targets can smoothly transition a surface plot between two datasets.

Data-Driven Animation

The most common animation pattern in Three.js applications is not decorative motion. It is data-driven: positions, colours, and sizes that change when data updates. The animated transition patterns in the data visualisation page cover buffer interpolation in detail.

Motion Preferences and Accessibility

The prefers-reduced-motion media query is not optional. Users who set this preference may experience motion sickness, seizures, or vertigo from screen animation. Respect it.

const prefersReduced = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

// Adapt animation behaviour
const DURATION = prefersReduced ? 0 : 0.6;
const SPRING_CONFIG = prefersReduced
  ? { mass: 1, tension: 1000, friction: 100 } // instant
  : { mass: 1, tension: 280, friction: 20 };   // springy

// For GSAP
gsap.defaults({ duration: DURATION });

// Listen for changes (user can toggle during session)
window.matchMedia('(prefers-reduced-motion: reduce)')
  .addEventListener('change', (e) => {
    gsap.defaults({ duration: e.matches ? 0 : 0.6 });
  });

When reduced motion is active: camera transitions are instant (duration 0), spring animations settle immediately (high friction), data transitions snap without interpolation, ambient and decorative motion stops entirely. The information still updates. Only the motion is removed. See the accessibility page for broader guidance.

Performance Budgets for Animation

Animation cost compounds. Each running animation adds to the per-frame JavaScript cost. Budget accordingly.

The rules: pre-allocate reusable Vector3 and Color objects (avoid creating temporaries in the render loop), use delta from the clock for time-based animation, and profile with Chrome DevTools Performance panel to verify frame budget compliance. For mobile optimisation, reduce concurrent animations, increase spring friction (fewer oscillation cycles), and shorten durations. On throttled devices, instant transitions are better than stuttering ones.

The Business Link

The investment is in architecture (interruptible animation systems, motion preferences, frame budget awareness), not in making things wiggle. Well-engineered animation reduces cognitive load. Poorly-engineered animation causes motion sickness, wastes frame budget, and makes the application feel unreliable.