PixiJS Animated Sprites — Frame-Based Animation

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about PixiJS Animated Sprites. We cover key concepts, practical examples, and best practices to help you master this topic.

PixiJS AnimatedSprite plays frame-based animations from pre-defined texture arrays or sprite sheets, with full playback control.

What You'll Learn

By the end of this guide, you will create AnimatedSprite from sprite sheet frames, control speed and looping, build multiple animation states (idle, walk, jump), switch animations seamlessly, and handle animation events.

Basic AnimatedSprite

var frames = [];
for (var i = 0; i < 8; i++) {
    frames.push(PIXI.Texture.from('walk_' + i + '.png'));
}

var anim = new PIXI.AnimatedSprite(frames);
anim.animationSpeed = 0.15;
anim.play();
app.stage.addChild(anim);

Animation State Machine

var states = {
    idle: idleFrames,
    walk: walkFrames,
    jump: jumpFrames
};

var currentAnim = new PIXI.AnimatedSprite(states.idle);
currentAnim.animationSpeed = 0.1;
currentAnim.play();

function switchState(newState) {
    currentAnim.textures = states[newState];
    currentAnim.play();
}

Animation Events

anim.onFrameChange = function(currentFrame) {
    if (currentFrame === 3) {
        console.log('Mid-animation frame');
    }
};

anim.onComplete = function() {
    console.log('Animation finished');
};

Common Mistakes

1. Frame Array Empty

If texture names are wrong, the frames array has undefined textures. Verify sprite sheet frame names.

2. animationSpeed Too High

Speed > 0.5 with many frames runs faster than 60fps can display. Use 0.05-0.2 for most animations.

3. Not Stopping Previous Animation

When switching states, call currentAnim.stop() first, then change textures and play.

4. Loop Setting

loop defaults to true. Set anim.loop = false for one-shot animations like jump.

5. Missing Textures After Load

Ensure textures are loaded before creating AnimatedSprite. Use the loader callback.

Practice Questions

Q1: How do you create an AnimatedSprite? A: Pass an array of PIXI.Texture objects to the constructor.

Q2: How do you control playback speed? A: Set animationSpeed (default 0.05). Higher = faster.

Q3: How do you stop animation? A: Call anim.stop(). Call anim.play() to resume.

Q4: How do you detect animation end? A: Set anim.onComplete callback or listen for the 'complete' event.

Q5: How do you jump to a specific frame? A: Set anim.currentFrame = frameIndex.

Challenge: Build a character with 3 animation states (idle, walk, jump). Press arrow keys to move and space to jump. The animation should switch smoothly based on state.

FAQ

How do I create sprite sheets?

Use tools like TexturePacker, Shoebox, or Aseprite to export sprite sheets with JSON frame data.

Can AnimatedSprite use a single horizontal strip?

Yes. Pass a single texture and split it manually into frame textures.

How do I reverse an animation?

Set anim.animationSpeed = -positiveValue to play backward.

Can I change frame order at runtime?

Yes. Create a new textures array with reordered frames and assign it.

Does AnimatedSprite support GPU batching?

Yes. Multiple AnimatedSprite instances with the same texture batch together.

Try It Yourself

Create an animated character with state switching.

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Animated Sprite</h2>
<button onclick="switchAnim('idle')">Idle</button>
<button onclick="switchAnim('walk')">Walk</button>
<button onclick="switchAnim('jump')">Jump</button>
<script>
var app = new PIXI.Application({ width: 400, height: 300, background: 0xf5f5f5 });
document.body.appendChild(app.view);

// Generate frame textures programmatically
function createFrameTexture(color, size) {
    var g = new PIXI.Graphics();
    g.beginFill(color);
    g.drawCircle(20, 20, size);
    g.endFill();
    return app.renderer.generateTexture(g);
}

var idleFrames = [
    createFrameTexture(0x4ecdc4, 16),
    createFrameTexture(0x4ecdc4, 18),
    createFrameTexture(0x4ecdc4, 16),
    createFrameTexture(0x4ecdc4, 14)
];

var walkFrames = [
    createFrameTexture(0xff6b35, 16),
    createFrameTexture(0xff6b35, 20),
    createFrameTexture(0xff6b35, 16),
    createFrameTexture(0xff6b35, 20)
];

var jumpFrames = [
    createFrameTexture(0x2a9d8f, 20),
    createFrameTexture(0x2a9d8f, 24),
    createFrameTexture(0x2a9d8f, 28),
    createFrameTexture(0x2a9d8f, 32)
];

var character = new PIXI.AnimatedSprite(idleFrames);
character.x = 200;
character.y = 150;
character.anchor.set(0.5);
character.animationSpeed = 0.1;
character.play();
app.stage.addChild(character);

function switchAnim(state) {
    character.stop();
    if (state === 'idle') character.textures = idleFrames;
    if (state === 'walk') character.textures = walkFrames;
    if (state === 'jump') {
        character.textures = jumpFrames;
        character.loop = false;
    } else {
        character.loop = true;
    }
    character.play();
}
</script>
</body>
</html>

What's Next

Apply visual filters.

Filters — Visual filters. Masks — Masking and clipping.

← Previous PixiJS Tiling Sprites — Scrolling Backgrounds and Textures Next → PixiJS Filters — Applying Visual Effects

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Pixijs