tweens

Animate game object properties with tweens and tween chains in Phaser 4.

Updated Jun 23, 2026

Search Tags:#game development #animation #tweening #easing functions #phaser 4

Ready to run

npx skills add https://github.com/Joshua-Allen/stake-engine-game-dev --skill tweens-joshua-allen

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/Joshua-Allen/stake-engine-game-dev/tree/main/skills/tweens
Command: npx skills add https://github.com/Joshua-Allen/stake-engine-game-dev --skill tweens-joshua-allen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you master the art of animating properties over time in Phaser 4, covering tweens, tween chains, easing functions, stagger, yoyo, repeat, callbacks, number tweens, and the TweenManager.

Core Features & Use Cases

Tweening: Animate properties like position, scale, rotation, and alpha values over time.
Tween Chains: Sequence multiple tweens to create complex animations.
Easing Functions: Apply smooth transitions with various easing functions.
Stagger: Offset tweens across multiple targets for synchronized animation.
Use Case: Create dynamic UI elements, character animations, and interactive effects in your Phaser 4 games.

Quick Start

Add a tween to move a logo to x:600 over 2 seconds using the this.tweens.add() method.

Frequently Asked Questions about tweens

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

FAQPage Schema

How do I animate game object properties over time in Phaser 4?▼

To animate game object properties over time in Phaser 4, use the `this.tweens.add()` method to interpolate values like position, scale, rotation, and alpha across a specified duration.

What is a tween chain and how does it work in Phaser 4?▼

A tween chain in Phaser 4 sequences multiple tweens to execute one after another, allowing you to create complex, multi-step animations by linking individual tween transitions together.

How do I use easing functions for smooth transitions in Phaser 4?▼

Easing functions in Phaser 4 apply mathematical curves to your tweens, controlling the rate of change to produce smooth transitions for game object animations rather than linear movement.

Can I stagger tweens across multiple targets in Phaser 4?▼

Yes, you can offset tween start times across multiple targets using the stagger feature in Phaser 4, which synchronizes overlapping animations to create dynamic wave-like effects.

How do I handle repeat, yoyo, and callbacks in Phaser 4 tweening?▼

Phaser 4 tweening allows you to configure tweens to repeat, reverse direction automatically with yoyo, and execute callback functions at specific lifecycle events to manage animation behavior.

Does this Phaser 4 tweening guide cover the TweenManager lifecycle?▼

Yes, this guide covers managing the tween lifecycle through the Phaser 4 TweenManager, including creating tweens, setting properties, and handling callbacks for game object animations.