Pixijs Scene Gif
Show animated GIFs in PixiJS v8 scenes with correct GifSource loading, playback controls, and performance-aware patterns.
Overview
pixijs-scene-gif is an agent skill for the Build phase that teaches PixiJS v8 GifSprite setup, GifSource loading, playback APIs, callbacks, and performance tradeoffs for animated GIFs.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-gifWhat is this skill?
- Requires side-effect import pixi.js/gif before Assets.load returns a GifSource
- GifSprite options: autoPlay, loop, animationSpeed, play/stop, currentFrame
- Callbacks: onComplete, onLoop, onFrameChange for sequencing UI or game events
- GifSource sharing, clone, and destroy lifecycle documented for memory safety
- Performance note: multi-frame GIFs decode to separate canvases—prefer AnimatedSprite atlases when critical
- Documents GifSprite constructor options and three playback callbacks (onComplete, onLoop, onFrameChange)
Adoption & trust: 1.2k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping a PixiJS scene with GIF animations but keep hitting wrong asset types, missing gif loader registration, or frame stutter from misunderstood GifSprite options.
Who is it for?
Indie game or interactive canvas builders on PixiJS v8 who need quick, correct GIF playback without reading the entire renderer docs.
Skip if: Teams standardized on spine/dragonbones pipelines, pure CSS/DOM animation, or PixiJS versions before v8 gif extension semantics.
When should I use this skill?
Use when displaying animated GIFs in PixiJS v8: GifSprite, GifSource, pixi.js/gif import, animationSpeed, currentFrame, autoPlay, callbacks, or destroy/clone.
What do I get? / Deliverables
You get a working GifSprite on stage with documented play/stop, loop, speed, and event hooks—and a clear rule for when to switch to AnimatedSprite atlases.
- Stage-ready GifSprite with anchor and positioning
- Documented playback and lifecycle pattern for GifSource
Recommended Skills
Journey fit
How it compares
A PixiJS scene recipe skill, not a general asset pipeline or Spine animation guide.
Common Questions / FAQ
Who is pixijs-scene-gif for?
Developers using coding agents to implement PixiJS v8 games or rich web UIs that must display animated GIF files as display objects.
When should I use pixijs-scene-gif?
Use it in Build → frontend when implementing GifSprite, wiring Assets.load for .gif, tuning animationSpeed or loop, or handling onFrameChange and onComplete in a Pixi scene.
Is pixijs-scene-gif safe to install?
It is documentation-only MIT guidance with no bundled executables; still review the Security Audits panel on this Prism page before trusting any third-party skill source.
SKILL.md
READMESKILL.md - Pixijs Scene Gif
`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: 1, }); gif.anchor.set(0.5); gif.x = app.screen.width / 2; gif.y = app.screen.height / 2; app.stage.addChild(gif); ``` > [!NOTE] > GIFs decode every frame into a separate canvas texture. For performance-critical animations with many frames, prefer a spritesheet with `AnimatedSprite` — it uses a single atlas texture and batches better on the GPU. **Related skills:** `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-sprite` (`AnimatedSprite` for spritesheet-based animation), `pixijs-assets` (`Assets.load`, caching, unloading), `pixijs-ticker` (frame timing), `pixijs-performance` (texture memory). ## Constructor options `GifSpriteOptions` extends `Omit<SpriteOptions, 'texture'>`; `texture` is managed internally (set from `source.textures[0]` and swapped per frame). All other `Sprite` options (`anchor`, `scale`, `tint`, `roundPixels`, etc.) are valid, and all `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. Leaf-specific options added by `GifSpriteOptions`: | Option | Type | Default | Description | | ---------------- | --------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- | | `source` | `GifSource` | — | Required. The parsed GIF data returned by `Assets.load('file.gif')`. Can be shared across multiple `GifSprite` instances. | | `autoPlay` | `boolean` | `true` | Start playback immediately on construction. If `false`, you must call `gif.play()` to begin. | | `loop` | `boolean` | `true` | Repeat the animation on reaching the last frame. When `false`, the sprite stops at the final frame and fires `onComplete`. | | `animationSpeed` | `number` | `1` | Multiplier on the GIF's native frame timing. `2` runs at double speed; `0.5` runs at half. | | `autoUpdate` | `boolean` | `true` | Connect playback to `Ticker.shared`. Set to `false` to drive updates yourself via `gif.update(ticker)`. | | `fps` | `number` | `30` | Fallback frame rate for GIFs that do not specify per-frame delays. | | `onComplete` | `() => void \| null` | `null` | Called when a non-looping animation reaches the last frame.