pixijs-scene-gif

Render animated GIFs in PixiJS scenes using GifSprite and GifSource.

1|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-gif-matthewharwood
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-scene-gif
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-scene-gif
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-gif-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables rendering animated GIFs inside PixiJS scenes by leveraging the pixi.js/gif loader and GifSprite with GifSource, providing reliable playback control and reusable sources.

Core Features & Use Cases

  • GIF loading: require side-effect import of pixi.js/gif to register GIF asset support.
  • Playback control: create a GifSprite from a GifSource and manage play, pause, currentFrame, and animationSpeed.
  • Resource sharing: share a GifSource across multiple GifSprite instances and unload when no longer needed.

Quick Start

Import the GIF extension, load a GIF with Assets.load to obtain a GifSource, and create a GifSprite({ source }) to add to your stage.

Frequently Asked Questions about pixijs-scene-gif

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

FAQPage Schema
How do I render animated GIFs in a PixiJS scene?

To render animated GIFs in a PixiJS scene, use a side-effect import of pixi.js/gif, load the GIF via Assets.load to produce a GifSource, then create a GifSprite with that source and add it to your stage.

Can I share a single GIF source across multiple sprites in PixiJS?

Yes, you can share a single GIF source across multiple PixiJS sprites by creating several GifSprite instances from one loaded GifSource, then calling clone or destroy to manage resources efficiently when no longer needed.

How do I control GIF playback speed and looping in PixiJS?

Control GIF playback in PixiJS by setting GifSpriteOptions properties including autoPlay, loop, animationSpeed, and currentFrame, while using onComplete and onFrameChange callbacks to handle animation events.

Do I need to import pixi.js/gif to load GIF assets in PixiJS?

Yes, you must perform a side-effect import of pixi.js/gif to register the GIF asset loader before using Assets.load to fetch the GIF and generate a GifSource for your PixiJS application.

What is the best way to manage GIF resource unloading in PixiJS?

Manage GIF resources in PixiJS by sharing a GifSource across multiple GifSprite instances and calling destroy to unload the source when no sprites are using it, ensuring efficient resource management.

Why does my GIF not animate when added to the PixiJS stage?

Your GIF may not animate because the pixi.js/gif extension was not imported as a side-effect before loading, or the GifSpriteOptions autoPlay property is not enabled when creating the sprite from the GifSource.