tweens

Create and chain Phaser 4 tweens for game object property animations.

Updated Apr 22, 2026

Search Tags:#javascript #animation #phaser #game-development #easing #tween #tween-manager

Ready to run

npx skills add https://github.com/arnaudruffin/dvx-phaser-game --skill tweens-arnaudruffin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/arnaudruffin/dvx-phaser-game/tree/main/.agents/skills/tweens
Command: npx skills add https://github.com/arnaudruffin/dvx-phaser-game --skill tweens-arnaudruffin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a complete guide to animating properties over time in Phaser 4 via Tweens, including configuration, sequencing, easing, staggering, and callbacks.

Core Features & Use Cases

Basic Tween: create, start, and manage tweens to animate properties on game objects.
Tween Chains & Sequencing: chain multiple tweens to orchestrate complex animations.
Advanced Timing & Per-Property Control: configure delay, duration, easing, yoyo, repeat, stagger, and per-property overrides.
Real-World Scenarios: animate character movement, UI transitions, screen flashes, and procedural motion with precise timing.

Quick Start

Create a basic tween on a sprite by calling the tween manager to animate its properties over a duration.

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 to animate game object properties in Phaser 4?▼

To create a tween in Phaser 4, call the tween manager to animate specific properties on game objects over a set duration. This automates property transitions by configuring duration, easing, and target values.

How do I chain multiple tweens for complex animation sequencing in Phaser?▼

Chaining tweens in Phaser orchestrates complex animations by linking multiple tween instances sequentially. This allows developers to queue distinct property animations, ensuring one completes before the next begins.

Can I configure per-property overrides for delay and easing in Phaser tweens?▼

Yes, Phaser tweens support per-property overrides through TweenBuilderConfig. You can assign unique delay, duration, easing, and yoyo settings to individual properties within a single tween.

How does stagger work when animating multiple sprites with Phaser tweens?▼

Stagger distributes tween start times across an array of targets, creating a cascading animation effect. This Phaser feature offsets each target's animation timeline by a specified interval for procedural motion.

Do I need JavaScript knowledge to use event callbacks with Phaser tweens?▼

Yes, implementing event callbacks for Phaser tweens requires JavaScript or TypeScript knowledge. Callbacks execute custom logic at specific tween lifecycle points, demanding familiarity with function scope and event handling.

What is the best way to handle UI transitions and character movement with Phaser tweens?▼

The best way to handle UI transitions and character movement is using Phaser's TweenManager to automate property changes. It provides precise timing control, yoyo repeats, and easing for smooth procedural motion.