Originally posted by **ambmcmdmem626** August 7, 2024
**Version: 0.29.3**
### Premise
I want to implement a loading screen with the following GIF (20ms x 85 frames) and [`Gif.toAnimation()`](https://github.com/excaliburjs/Excalibur/blob/76f65bdac4befc8e092f35fd3fb6dd92ea7ff119/src/engine/Resources/Gif.ts#L102-L113):
![snake_loading](https://github.com/user-attachments/assets/ad12bec6-ac4b-424c-8740-8d673a502486)
### Main Topic
When I checked the operation of the animation in the Excalibur sandbox, it displayed as follows
(A different animation was displayed from this GIF.):
https://github.com/user-attachments/assets/6d65b27b-0aed-4b78-9274-7c04df84274e
Additionally, I have confirmed that the image(animation) displays correctly when using [`sandbox/tests/gif/sword.gif`](https://github.com/excaliburjs/Excalibur/blob/main/sandbox/tests/gif/sword.gif).
Could this be due to a setting issue?
\* I will continue my investigation and will update you as soon as I find out more!
Also, below are the code and network tabs for reference.
### The code
\* This is almost the same as [`sandbox/tests/gif/animatedGif.ts`](https://github.com/excaliburjs/Excalibur/blob/main/sandbox/tests/gif/animatedGif.ts)
```
///
var game = new ex.Engine({
canvasElementId: 'game',
width: 600,
height: 400,
displayMode: ex.DisplayMode.FitScreen,
antialiasing: false
});
game.currentScene.camera.zoom = 2;
var gif: ex.Gif = new ex.Gif('./snake_loading.gif', ex.Color.Transparent); // changed path and color
var loader = new ex.Loader([gif]);
game.start(loader).then(() => {
var actor = new ex.Actor({ x: game.currentScene.camera.x, y: game.currentScene.camera.y, width: gif.width, height: gif.height });
actor.graphics.add(gif.toAnimation(20)); // 500 → 20
game.add(actor);
});
```
### Network
\* The GIF(focused) was retrieved correctly, but I think the data:image was not retrieved as intended.
![image](https://github.com/user-attachments/assets/ff6bf1d9-9a91-47da-b8c0-b914556eed36)
↓ [Gif.ts:570](https://github.com/excaliburjs/Excalibur/blob/76f65bdac4befc8e092f35fd3fb6dd92ea7ff119/src/engine/Resources/Gif.ts#L570)
https://github.com/excaliburjs/Excalibur/blob/76f65bdac4befc8e092f35fd3fb6dd92ea7ff119/src/engine/Resources/Gif.ts#L570
Discussed in https://github.com/excaliburjs/Excalibur/discussions/3170