Phaser home
Log inCreate a game

← Expansion packsLogic

Phaser AE

Property tweens

Free packv3.0.0-3Logic

Property animation on the game's fixed clock: move any number, or blend any hex colour, towards a target with easing, delay, loops and yoyo. A newer tween takes the property over, so re-aiming one mid-flight is all a retarget needs.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 14, 2026 · updated October 20, 2026

Property tweens: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

The pack

tween

function tween(): Pack<{ tween: TweenApi }>

The tween pack: game.tween, a simulate step before physics-2d, scene-owned tweens. Requires maths and color; no options.

Types

Easing

type Easing = EaseName | EaseFn | readonly [number, number, number, number]

An easing: a name from maths.EASE, a curve function, or a cubic-bezier tuple [x1, y1, x2, y2].

Props

type Props = Record<string, number | string>

The properties to tween: numbers, or hex colour strings (blended in RGB).

TweenApi

interface TweenApi

What game.tween presents.

  • to(target: object, props: Props, opts?: TweenOptions): TweenHandle — From the current values to props. Throws if a property is not a number or hex colour.
  • from(target: object, props: Props, opts?: TweenOptions): TweenHandle — From props to the current values; the start values are written at once, before any delay.
  • fromTo(target: object, from: Props, to: Props, opts?: TweenOptions): TweenHandle — Explicit ends; the from values are written at once. Every key of to must also be in from.
  • sequence(steps: ReadonlyArray<() => TweenHandle | PromiseLike<unknown>>): TweenGroup — Run steps one after another; each returns a handle (or a promise).
  • group(...handles: TweenHandle[]): TweenGroup — One control over several running tweens.
  • interpolate(a: number | string, b: number | string, t: number, ease?: Easing): number | string — One-off: the value between two numbers or hex colours at t.
  • pauseAll(): void — Pause every live tween.
  • resumeAll(): void — Resume every live tween.
  • stopAll(jumpToEnd?: boolean): void — Stop every live tween; jumpToEnd writes their end values.
  • readonly count: number — Live tweens, including paused and delayed ones.
  • isTweening(target?: object, prop?: string): boolean — Is anything still animating? With no arguments, true while ANY tween is live — the "has the presentation caught up with the rules?" gate a board game holds its input behind. With a target, only that object's tweens count; with a prop as well, only tweens that drive that property. A tween still serving out its delay counts as live.

TweenGroup

interface TweenGroup extends PromiseLike<void>

Control over several tweens at once, from sequence or group. Also a thenable that resolves when all have finished.

  • pause(): void — Pause every member.
  • resume(): void — Resume every member.
  • stop(jumpToEnd?: boolean): void — Stop every member; jumpToEnd writes their end values.
  • readonly isDone: boolean — True when every member is done.

TweenHandle

interface TweenHandle extends PromiseLike<void>

Control over one running tween. Also a thenable: await resolves when it finishes, is stopped, or its scene exits (never for loop: true).

  • pause(): void — Hold the tween where it is.
  • resume(): void — Continue after pause.
  • stop(jumpToEnd?: boolean): void — Stop; jumpToEnd snaps to the end values (and cancels remaining repeats).
  • seek(seconds: number): void — Jump to a time in seconds from the start of the current run (after delay).
  • readonly progress: number — 0..1 of the current run (time, not eased value); 1 once done.
  • readonly isPlaying: boolean — Not done and not paused.
  • readonly isDone: boolean — Finished, stopped, or ended by its target's death or scene exit.

TweenOptions

interface TweenOptions

Options for to, from and fromTo.

  • duration?: number — Seconds. Default 0.5.
  • ease?: Easing — Default easeInOutQuad.
  • delay?: number — Seconds before the first run starts. Default 0. to captures its start values when the delay ends.
  • loop?: boolean | number — true = forever; a number = that many extra repeats.
  • yoyo?: boolean — Reverse on each repeat.
  • onStart?(): void — Called once when the tween starts running (after any delay).
  • onUpdate?(progress: number): void — Called every simulate step with 0..1 of the current run.
  • onComplete?(): void — Called when the tween finishes or is stopped. Not called when its target dies or its scene exits.