pixijs-scene-gif
This skill teaches agents how to load and render animated GIF files as sprites within PixiJS v8 scenes. It covers the setup process, sprite creation from GIF sources, and integration with PixiJS's rendering pipeline for WebGL and Canvas environments. Perfect for developers building interactive 2D applications that need smooth GIF animation support.
pixijs-scene-gif enables you to load and display animated GIF files as sprites in PixiJS v8 scenes. The skill covers loading GIF assets, creating sprite instances from GIF sources, and integrating them into your rendering pipeline for both WebGL and Canvas environments. You can render multiple GIF sprites simultaneously with smooth animation playback.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-scene-gif
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-scene-gif ~/.claude/skills/pixijs-scene-gifFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you play animated GIFs in PixiJS?
pixijs-scene-gif enables you to load and display animated GIF files as sprites in PixiJS v8 scenes. The skill covers loading GIF assets, creating sprite instances from GIF sources, and integrating them into your rendering pipeline for both WebGL and Canvas environments. You can render multiple GIF sprites simultaneously with smooth animation playback.
How can you control GIF animation speed in pixijs-scene-gif?
pixijs-scene-gif provides playback speed control through speed multipliers and frame position management. You can adjust animation speed, control looping behavior, and manually update the current frame. The skill teaches how to manipulate playback parameters to achieve custom animation timing for your GIF sprites.
What animation lifecycle events does pixijs-scene-gif support?
pixijs-scene-gif handles animation lifecycle events and callbacks including onComplete and onLoop events. You can respond to frame changes and animation state transitions, enabling you to trigger custom logic when animations finish or loop. This allows you to coordinate GIF playback with other scene interactions.
Can you share GIF source data across multiple sprite instances?
Yes, pixijs-scene-gif supports sharing GIF source data across multiple sprite instances through GIFSource cloning and sharing. This approach optimizes memory usage by allowing multiple sprites to reference the same underlying GIF asset data rather than duplicating it for each sprite.
How does pixijs-scene-gif handle memory and texture cleanup?
pixijs-scene-gif manages GIF memory and texture cleanup on sprite destruction. The skill teaches proper resource management to prevent memory leaks when removing GIF sprites from your scene, ensuring efficient cleanup of textures and animation data associated with each sprite instance.
What's the difference between GIF sprites and PixiJS AnimatedSprites?
pixijs-scene-gif provides native GIF file support as an alternative to traditional spritesheets. While AnimatedSprites require pre-split frame images, pixijs-scene-gif loads complete GIF files directly, offering simpler asset management and better performance in scenarios where GIF animation is the primary requirement.
SKILL.md
rendered from the published skill — quoted content, verbatim
GifSprite plays an animated GIF as a display object. Assets.load('animation.gif') returns a GifSource (not a Texture), and you wrap that in a GifSprite. Requires a side-effect import 'pixi.js/gif' to register the loader extension.
Assumes familiarity with pixijs-scene-core-concepts. GifSprite extends Sprite, so it is a leaf: do not nest children inside it. Wrap multiple GifSprite instances in a Container to group them.
Quick Start
```ts import "pixi.js/gif"; import { GifSprite } from "pixi.js/gif";
const source = await Assets.load("animation.gif");
const gif = new GifSprite({ source, autoPlay: true, loop: true, animationSpeed:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixijs-scene-gif/SKILL.md