tweens

Create and manage property animations in Phaser 4 game scenes.

Updated Mar 27, 2026
One-click install
npx skills add https://github.com/tja688/WebGameDevPlace --skill tweens-tja688
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/tja688/WebGameDevPlace/tree/main/.claude/skills/tweens
Command: npx skills add https://github.com/tja688/WebGameDevPlace --skill tweens-tja688

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill simplifies the complex process of animating game objects over time, removing the need for manual frame-by-frame updates or cumbersome state management.

Core Features & Use Cases

  • Tween Management: Create, chain, and control complex animations including easing, yoyo, and repeat logic.
  • Advanced Sequencing: Use TweenChains to orchestrate multi-step animations in a specific order.
  • Use Case: Create a polished UI transition where a menu button scales up, bounces, and fades in simultaneously using a single configuration object.

Quick Start

Use the tweens skill to animate the x position of the player sprite to 500 over 1000 milliseconds using a Sine easing function.

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 in Phaser 4?

To create multi-step animations in Phaser 4, use TweenChains to orchestrate sequenced property updates. This allows you to chain complex animations in a specific order without managing manual frame-by-frame state updates.

What is the best way to sequence complex animations in Phaser 4?

To create multi-step animations in Phaser 4, use TweenChains to orchestrate sequenced property updates. This allows you to chain complex animations in a specific order without managing manual frame-by-frame state updates.

Can I create yoyo and repeat effects for UI transitions in Phaser?

Yes, you can create stagger effects in Phaser 4 using the tweens skill. It supports number-based interpolation to offset property updates across multiple game objects, creating dynamic staggered behaviors.

Does this approach require manual frame updates for JavaScript game animations?

No, this approach eliminates manual frame-by-frame updates for JavaScript game animations. The tweens skill simplifies state management by relying on the Phaser TweenManager to handle playback control and property interpolation.

How do I apply easing functions to sprite movements in Phaser?

To apply easing functions to sprite movements in Phaser, specify the desired easing type within the tween configuration object. For example, animate a player sprite's x position over 1000 milliseconds using a Sine easing function.

Can I create stagger effects for multiple game objects in Phaser 4?

Yes, you can create stagger effects in Phaser 4 using the tweens skill. It supports number-based interpolation to offset property updates across multiple game objects, creating dynamic staggered behaviors.