Easing

Easing is an object of functions that turn elapsed time into an interpolated number. Pass one to Timer.tween() or Timer.tweenAsync() to change how an animation accelerates and decelerates. See tweening for the underlying idea.

Quick Start

this.game.timer.tween(panel, { x: 320 }, 0.3, {
  easing: Easing.easeOutQuad,
});

All easing functions use the same parameters:

const value = Easing.easeOutQuad(t, b, c, d);

Parameter	Meaning
t	Elapsed time.
b	Beginning value.
c	Total change: end - start.
d	Total duration, in the same unit as t.

For a value moving from 20 to 120 over 0.5 seconds, use b = 20, c = 100, and d = 0.5.

flowchart LR
	A[Elapsed time t] --> B[Easing function]
	C[Start b change c duration d] --> B
	B --> D[Interpolated value]
	D --> E[Assign tweened property]

Functions

linear(t, b, c, d)

Changes at a constant rate. Use it when uniform movement is appropriate.

easeInQuad(t, b, c, d)

Starts slowly and accelerates toward the end. Use it for motion that builds momentum.

easeOutQuad(t, b, c, d)

Starts quickly and decelerates toward the end. It is a common choice for an object settling into place.

easeInOutQuad(t, b, c, d)

Accelerates during the first half and decelerates during the second half. Use it for smooth movement between two resting positions.

easeInOutBack(t, b, c, d, s = 1.70158)

Overshoots near the start and end before settling. s controls the overshoot strength; the default is 1.70158.

const start = 20;
const end = 120;
const duration = 0.5;
const change = end - start;

const halfway = Easing.easeInOutQuad(duration / 2, start, change, duration);

Choosing an easing

Desired motion	Function
Constant speed	linear
Build momentum	easeInQuad
Settle into place	easeOutQuad
Smooth start and stop	easeInOutQuad
Playful overshoot	easeInOutBack

Usually let Timer call the easing function

Timer captures the starting value, calculates c, advances t each frame, and clamps its final elapsed value to the duration. In most application code, choose an easing through the timer options instead of calling these functions directly.

Use valid time values

The easing functions expect a positive duration and an elapsed time in the same unit. They do not validate or clamp their own inputs. Calling them directly with d = 0 or an elapsed time beyond the duration can produce unexpected values.