Learning on Web Dev Open is free for all.

Immersive Web > Light, motion and the feel of weightEasing, damping and the feel of weight
Phase 07Light, motion and the feel of weight363 of 434

Easing, damping and the feel of weight

Why a spring reads as physical and a cubic bezier reads as animated, and the one-line frame-rate bug in every lerp you will copy.

Concept13 minAI pair

A duration-based ease knows where it is going and when it will arrive, which is why it feels authored. A spring knows only its current velocity and a target, so it responds to interruption: retarget it mid-flight and it carries momentum instead of restarting. Anything that follows a pointer, a scroll or a physics-like interaction should be a spring; anything choreographed to a moment should be an ease.

The bug hiding in every naive lerp is that multiplying by a fixed factor per frame makes the smoothing rate depend on frame rate: identical code is twice as fast on a 120Hz display as on a 60Hz one. The frame-rate-independent form uses delta time in an exponential, a factor of 1 - exp(-rate * dt), and once you have written it, put it in a utility and never write the naive one again.

Weight comes from the relationship between the numbers rather than from any single one. Heavy things accelerate slowly, overshoot little and settle late; light things snap and wobble. Deciding which of your elements are heavy, and keeping that consistent across the whole piece, is most of what makes 3D work feel designed rather than assembled.

You should now be able to

  • Choose between duration-based easing and a spring
  • Write a damping function that behaves the same at 30 and 144fps
Ask the community

Loading…