skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tweens

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

2|10|Updated Jul 28, 2026
Search Tags:#game development#javascript#animation#phaser#easing#tween#tween chain
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill tweens-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweens
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/tweens
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill tweens-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animating game object properties smoothly in Phaser 4 requires knowing the TweenManager API, config options, easing names, and lifecycle events, which are easy to misuse without a reference. ## Core Features & Use Cases - Property Animation: Create tweens on any Game Object or plain object with absolute, relative, array, or per-property config values. - Sequencing and Timing: Build tween chains, stagger delays across targets, and control yoyo, repeat, loop, hold, and delay behavior. - Callbacks and Control: Hook into onStart, onUpdate, onComplete, and EventEmitter events, plus pause, seek, restart, and kill tweens at runtime. - Use Case: Animate a coin bobbing up and down forever with yoyo and repeat: -1, then chain a player entrance sequence of move, scale, and fade tweens. ## Quick Start Ask the AI to write a Phaser 4 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 containing targets, the properties to animate, duration, and an optional ease. The tween starts immediately and auto-destroys on completion unless persist is true.

How to chain multiple tweens in sequence in Phaser?▼

Use this.tweens.chain with a tweens array of standard tween configs. Each entry plays after the previous one completes, and the chain supports loop, loopDelay, and chain-level callbacks like onComplete.

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. Power0 through Power4 alias common easings, and Linear or Stepped cover special cases.

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

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

Why did my Phaser tween reference stop working after completion?▼

Tweens auto-destroy after they complete, so stored references become invalid. Set persist: true in the config to keep the tween alive for replay, then call tween.destroy manually when finished.

How do I animate a number without a game object in Phaser?▼

Use this.tweens.addCounter with from, to, and duration values. Read the current value in onUpdate via tween.getValue, which is useful for score counters, timers, and progress bars.

Related Skills

Explore More Software Engineering Skills→
mudman1986mudman1986

tweens

Animate properties over time in Phaser 4 using tweens, chains, and easing functions.

Community
Intermediate
fiandofiando
1

dev-phaser-animations

Create sprite animations, tweens, and timeline sequences in Phaser 3 games.

Community
Intermediate
phaserjsphaserjs
40.1k

particles

Generate and control Phaser 4 particle effects with emitters, zones, and gravity wells.

Official
Intermediate
pixijspixijs
302

pixijs-ticker

Coordinate per-frame updates with the PixiJS v8 render loop.

Official
Intermediate