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.

What it does

game.tween.to(target, props, opts) moves the named properties of any plain object, a sprite, its data bag or anything else with numbers on it, from their current values to new ones over a duration. from animates from the values you give to the current ones, for entrances where the start must show at once, and fromTo sets both ends. A string property holding a hex colour, such as a tint, blends in RGB. A handle can pause, resume, seek and stop, reports its progress, and can be awaited.

The idea that makes it fit game logic is ownership. A new tween takes every property it drives off older tweens on the same object, so aiming a fresh to wherever a thing should now go picks up from wherever the old tween had got to and eases on. That is exactly what a sliding board wants: the rules resolve the whole move at once, and the presenter re-aims every tile at its new seat without caring whether it was already moving. isTweening() then answers whether the picture has caught up with the rules, for everything, for one object or for one property.

Tweens advance in the simulate step, so they freeze when the game pauses, run at the clock's time scale and replay deterministically. A tween on an object that dies ends with it, and a tween belongs to the scene that made it, so there is nothing to clean up on scene exit. End values are written exactly: a tween meant to land on 1 lands on 1.

Features

  • To, from and fromTo — from the current values, to the current values, or between two ends you give.
  • Numbers and colours — any numeric property, and hex colour strings blended in RGB.
  • Easing — any easing name from maths, an easing function of your own or a cubic-bezier tuple.
  • Timing — duration, delay, loop (a number of repeats, or for ever) and yoyo.
  • Callbacks and promises — onStart, onUpdate and onComplete, and every handle can be awaited.
  • Takeover, not conflict — a newer tween claims the properties it drives, so retargeting needs no extra call.
  • A settled check — isTweening(target?, prop?), for holding input until the animation catches up.
  • Sequences and groups — run steps one after another with sequence, and control several at once with group.
  • One-off values — interpolate between two numbers or two colours with no object.
  • Global control — pauseAll, resumeAll, stopAll and a live count.
  • Clock and scene aware — freezes with pause, replays exactly, ends with its object and its scene.

Good for

  • Puzzle and board games that animate tiles after the rules resolve and hold input until they settle.
  • Menus and HUDs: panels sliding in, buttons pulsing, score pops.
  • Hit feedback: a red tint flashing with yoyo, a squash and stretch on landing.
  • Entrances and exits: titles that bounce in and fade out, in a sequence.
  • Pickups and ambient motion: coins bobbing and lamps pulsing for ever with loop: true.
  • 3D scenes as much as 2D: anything with a number on it can be tweened.

Make it yours

Each tween takes duration (0.5 seconds by default), ease (easeInOutQuad), delay, loop, yoyo and the three callbacks; the pack itself takes no manifest options. Two different uses: a sliding-tile puzzle that re-aims each tile with a short easeOutQuad move on every turn of the board and accepts the next move only when isTweening() is false; and a title screen that runs a sequence of a bouncing entrance, a half-second pause and a fade, with a looping yoyo pulse on the start prompt.

A quick look

An eased move, an entrance, a looping colour flash, a mid-flight retarget and the settled check:

game.tween.to(h, { x: 400, rot: Math.PI }, { duration: 0.6, ease: 'easeOutBack' });
game.tween.from(h, { sx: 0, sy: 0 }, { duration: 0.3 });                 // entrance: start values show at once
game.tween.fromTo(h, { tint: '#ffffff' }, { tint: '#ff4040' }, { duration: 0.2, loop: 3, yoyo: true });
game.tween.to(tile, { x: 4, z: 0 }, { duration: 0.13, ease: 'easeOutQuad' });
game.tween.to(tile, { x: 0, z: 2 }, { duration: 0.13, ease: 'easeOutQuad' });   // continues from where it is
if (!game.tween.isTweening()) acceptInput();

Works with

  • maths and color — required, and composed before it, for the easing table and colour blending.
  • core-2d, core-3d and core-vector — all three include it, so most games have it already.
  • feel — camera shake, flash and hit-stop, which belong to the screen rather than an object.
  • fsm — for behaviour that branches.
  • match3 — whose steps it animates: tiles sliding, falling and swapping.

Good to know

  • Tween numbers and hex colours only; an object-valued property is a loud error.
  • There is no relative ('+=10') syntax and no stagger; build those with sequence and a loop.
  • Without yoyo, each repeat snaps back to the start value.
  • A tween ended by its object dying or its scene exiting resolves without calling onComplete.
  • Conflicts are per property and per object: two tweens on the same property of the same object cannot both run.

More Logic packs

Show all →