skills.rest
alexkafer
alexkaferCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixijs-scene-gif

Render animated GIFs in PixiJS v8 using GifSource and GifSprite.

Updated Mar 13, 2022
Search Tags:#gif#callbacks#asset loading#ticker#pixijs#scene graph#animated sprite
One-click install
npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-gif-alexkafer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-gif
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-scene-gif
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-gif-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of displaying animated GIFs in PixiJS correctly, including proper loading and frame-accurate playback without treating GIFs like normal textures.

Core Features & Use Cases

  • Animated GIF rendering via GifSprite: Play, stop, and control animation state while reading frame timing like currentFrame and totalFrames.
  • Correct asset loading with GifSource: Use the required pixi.js/gif side-effect import so Assets.load returns a GifSource that GifSprite can consume.
  • Playback control and lifecycle callbacks: Use autoPlay/loop plus onComplete, onLoop, and onFrameChange to drive UI or game logic, including manual update mode with a custom ticker.
  • Use case: Use it to render a looping animated reaction GIF on a profile card while reacting to frame changes to sync UI overlays or sound effects.

Quick Start

Ask the Skill to show how to load an animation.gif using the PixiJS GIF loader side effect and then create a GifSprite with autoPlay and loop enabled, centered on the 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 display animated GIFs in PixiJS v8?▼

To display animated GIFs in PixiJS v8, import pixi.js/gif to register the loader extension, load the GIF via Assets.load to get a GifSource, and pass it to a GifSprite for frame-accurate playback.

Why does my animated GIF not play correctly when loaded as a normal texture in PixiJS?▼

Treating a GIF as a normal texture ignores its frame timing. You must load it through the GifSource pipeline using the pixi.js/gif side-effect import so GifSprite can consume the GifSource and control playback.

Can I control GIF playback speed and looping behavior in PixiJS?▼

Yes, GifSprite supports options for autoPlay, loop, and animationSpeed. You can start, stop, and control the animation state while reading frame timing properties like currentFrame and totalFrames.

How do I trigger callbacks on specific GIF animation frames in PixiJS?▼

GifSprite provides lifecycle callbacks including onFrameChange, onLoop, and onComplete. You can use these to drive UI or game logic, such as syncing UI overlays or sound effects to specific animation frames.

Do I need a custom ticker to manually update GIF animations in PixiJS?▼

GifSprite integrates with the PixiJS ticker model by default, but supports a manual update mode using a custom ticker. This allows deterministic playback state when you need precise control over frame updates.

Related Skills

Explore More Software Engineering Skills→
matthewharwoodmatthewharwood
1

pixijs-scene-gif

Render animated GIFs in PixiJS scenes using GifSprite and GifSource.

Community
Advanced
kehwarkehwar

audio-and-sound

Manage audio playback, volume, and mute in Phaser 4 games.

Community
Advanced
adamhjkadamhjk
2

pixijs-scene-container

Group, position, and transform display objects in PixiJS v8 scenes.

Community
Intermediate
pixijspixijs
302

pixijs-scene-gif

Animate GIFs in PixiJS applications using GifSprite and GifSource.

Official
Intermediate