tweens

Animates object properties over time using Phaser 4 TweenManager, easing, chains, and stagger.

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill tweens-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/tweens
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill tweens-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animating game object properties frame-by-frame by hand is error-prone and verbose. This Skill provides the complete Phaser 4 tween API so you can move, fade, scale, and rotate objects with declarative configuration instead of manual update loops. ## Core Features & Use Cases - Property Tweening: Animate any numeric property on Game Objects or plain objects with absolute, relative, array, or function-based values, plus per-property overrides. - Sequencing and Timing: Build tween chains, apply stagger offsets across multiple targets, and control yoyo, repeat, loop, hold, and delay behavior. - Easing and Control: Use the full easing library (Quad through Bounce, Stepped, custom functions) and manage playback with pause, seek, restart, timeScale, and killTweensOf. - Use Case: You want a coin to bob up and down forever and a score counter to tick from 0 to 100. Use a yoyo repeat tween for the coin and addCounter with onUpdate for the counter. ## Quick Start Ask the AI to add a Phaser tween that moves a sprite to x 600 over two seconds with Sine easing and a completion callback.

Frequently Asked Questions about tweens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a tween in Phaser 4?▼

Call this.tweens.add inside a Scene with a config object specifying targets, the properties to animate, duration, and an ease name. The tween starts immediately and auto-destroys on completion unless you set persist to true.

How to chain multiple tweens in sequence in Phaser?▼

Use this.tweens.chain with a tweens array of standard tween configs; each entry starts after the previous one completes. Chain-level options include loop, loopDelay, and onComplete, and you can append more tweens dynamically with chain.add.

What easing functions does Phaser 4 support?▼

Phaser 4 supports Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back, and Bounce, each with easeIn, easeOut, and easeInOut variants, plus Linear, Stepped, and the Power0 through Power4 aliases. You can also pass a custom function taking t from 0 to 1.

What is the difference between repeat and loop in Phaser tweens?▼

Repeat is per-property and replays that property's interpolation, while loop restarts the entire tween including all properties. A repeat of 1 plays the property twice total, and loop -1 loops forever so onComplete never fires.

Why does my Phaser tween reference break after completion?▼

Tweens auto-destroy after finishing, so stored references become invalid. Set persist true in the config to keep the tween alive for replay via play or restart, and call destroy manually when finished.

How do I stagger animations across multiple sprites in Phaser?▼

Pass this.tweens.stagger as the delay value, for example delay: this.tweens.stagger(100) for 100ms offsets. Options include from center or last, range arrays, and grid-based stagger with easing for grid layouts.