when using Pixijs with transparent gif, the gif shows the old pixels (not cleaning previous).
see issue:

attaching transparent gif to try as well:

thank you for a great project,

FYI using latest libs.

Sean.

First of all, thanks for the plugin. really help me in my current project.
I'm having this issue when following the steps shown in the documentation:

I cannot figure out what's going on.
Here is an example of the code: https://codesandbox.io/s/pjijs-gif-frnug

Getting the resource.animation and adding it to the canvas for some GIFs only renders a portion of the GIF.

This renders on the canvas as

Analysing the GIF, the first frame has smaller dimensions than the overall GIF, which might be why

I want to control the playback of a gif, where the frame corresponds to the percentage of the base page that is loaded. In essence, a loading screen. Is this possible?

Version

    "pixi.js": "^6.2.0",
    "@pixi/gif" :"1.1.3"

I used the old docu

Install the loader for handle GIF images.

import { AnimatedGIFLoader } from '@pixi/gif';
import { Loader } from '@pixi/loaders';
Loader.registerPlugin(AnimatedGIFLoader);

function loadAsset(){
  const app = new Application();
  fetch('image.gif')
      .then(res => res.arrayBuffer())
      .then(AnimatedGIF.fromBuffer)
      .then(image => app.stage.addChild(image));
}

What does this message indicate?

    use(resource: LoaderResource, next: (...args: any[]) => void): void
    {
        if (resource.extension === GIF_EXTENSION)
        {
            resource.animation = AnimatedGIF.fromBuffer(resource.data);
        }
        next();
    }

according to the source code, the plugin only works when resource extension is .gif,
while my gif url could be https://example.com/425290bcf without file extension

I'm trying to use @pixijs/gif in my app but there is an issue.
when I import it:

import @pixi/gif

get this error message:

CANNOT READ PROPERTIES OF UNDEFINED (READING 'LINEAR')
TYPEERROR: CANNOT READ PROPERTIES OF UNDEFINED (READING 'LINEAR') AT EVAL (WEBPACK-INTERNAL:///./NODE_MODULES/@PIXI/GIF/DIST/PIXI-GIF.ESM.MJS:15:12094) AT ./NODE_MODULES/@PIXI/GIF/DIST/PIXI-GIF.ESM.MJS (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/SRC_COMPONENTS_CANVAS_BILLBOARDCANVAS_INDEX_TSX.JS:4362:1) AT OPTIONS.FACTORY (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/WEBPACK.JS?TS=1666530387962:688:31) AT __WEBPACK_REQUIRE__ (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/WEBPACK.JS?TS=1666530387962:37:33) AT FN (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/WEBPACK.JS?TS=1666530387962:343:21) AT EVAL (WEBPACK-INTERNAL:///./SRC/COMPONENTS/CANVAS/BILLBOARDCANVAS/INDEX.TSX:9:67) AT ./SRC/COMPONENTS/CANVAS/BILLBOARDCANVAS/INDEX.TSX (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/SRC_COMPONENTS_CANVAS_BILLBOARDCANVAS_INDEX_TSX.JS:73:1) AT OPTIONS.FACTORY (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/WEBPACK.JS?TS=1666530387962:688:31) AT __WEBPACK_REQUIRE__ (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/WEBPACK.JS?TS=1666530387962:37:33) AT FUNCTION.FN (HTTP://LOCALHOST:3000/_NEXT/STATIC/CHUNKS/WEBPACK.JS?TS=1666530387962:343:21)

I'm getting an issue where unless I set TARGET_FPMS to a number, the frame index does not get set correctly and it errors out.
I suspect this is caused by the line const elapsed = this.animationSpeed * deltaTime / (settings.TARGET_FPMS as number); which if TARGET_FMPS is not set would cause elapsed to be undefined, poisoning the frame index.

I just recently switched to pixijs 7.0.0-alpha.3 and gif 2.0.0 and this error seems new to that. Looking at the code though I'm not sure why this hasn't happened before, as settings.TARGET_FPMS seems like it has been undefined for a little while at least.

The docs for 7.0.0-alpha3 state that TARGET_FPMS has a Default Value of 0.06 but in this minimal test case, I'm getting undefined for both v7 and v6.5.2

import { settings } from '@pixi/settings'
console.log(settings.TARGET_FPMS)

Anyways, hopefully this helps. If there's a right way to fix this, I'm happy to make a pull request. Otherwise, settings.TARGET_FPMS = 0.06; is a perfectly good workaround so no worries if this gets closed or something.

Code to reproduce:

import * as PIXI from 'pixi.js';
import '@pixi/gif';

const app = new PIXI.Application();

document.body.appendChild(app.view);

const image = await PIXI.Assets.load('https://i2.mij.rip/2023/07/17/8f75a5d815120d64dbbcdc44906a975d.gif');
app.stage.addChild(image);

Probably these lines of code caused this result:

Hello,

I am trying below code, and just would like to add the image.gif to the specified position (x, y) with the specified size (width, height) or specified scale, How should I do? Is the image variable a texture or sprite?

Thanks v much.

import '@pixi/gif';
import { Assets } from 'pixi.js';

const app = new Application();
const image = await Assets.load('image.gif');
app.stage.addChild(image);

Hey there,
I've noticed that cloning an AnimatedGIF and immediatly adding it to a container causes it to not be shown for a fraction of a second.

I've tried reproducing the behaviour on a StackBlitz:
https://stackblitz.com/edit/vitejs-vite-63qf4t?file=src%2Fmain.ts

I looked through the repository and if I am not mistaken it would be due to the fact that when we .clone() the AnimatedGIF ...

• dirtyis initially set to false
• updateFrameIndex has not been called yet, therefore not setting dirty = true
• when updateFrameis called it won't execute since dirty is not set to true.