# Animated gif loading in version 1.0 of p5.js

**URL:** <https://discourse.processing.org/t/animated-gif-loading-in-version-1-0-of-p5-js/23744>\
**Category:** p5.js\
**Created:** [September 8, 2020, 5:49pm UTC](https://discourse.processing.org/t/animated-gif-loading-in-version-1-0-of-p5-js/23744 "2020-09-08T17:49:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jgl/32/3401_2.png) [@jgl](https://discourse.processing.org/u/jgl)\
**Post date:** [September 8, 2020, 5:49pm UTC](https://discourse.processing.org/t/animated-gif-loading-in-version-1-0-of-p5-js/23744/1 "2020-09-08T17:49:43Z")

</div>

Hey All,

I was poking around in 1.0 of p5.js and saw that gif loading was supposed to be working:

[https://medium.com/processing-foundation/p5-js-1-0-is-here-b7267140753a](https://medium.com/processing-foundation/p5-js-1-0-is-here-b7267140753a)

So I tried looking in the source for how it worked, as I couldn’t find any documentation:

[https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/test/unit/image/downloading.js](https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/test/unit/image/downloading.js)

and

[https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/src/image/p5.Image.js](https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/src/image/p5.Image.js)

and

[https://github.com/processing/p5.js/commit/3a500615a63a5b18a02de2b4ab94ada0a5fb0e34](https://github.com/processing/p5.js/commit/3a500615a63a5b18a02de2b4ab94ada0a5fb0e34)

I managed to get the following code to work with an animated gif!

in preload(), just load the animated gif as an image as normal:

```auto
function preload() {
  gifFile = loadImage("../gifs/perfectBlueRedNoodleLoop.gif");
}

```

then in draw():

```auto
  gifFile.pause();
  for (let i = 0; i < gifFile.numFrames(); i++) {
    gifFile.setFrame(i);
    image(gifFile, i * 30, 0, 100, 100);
  }

```

Works great! I’ll post an example working in the p5js editor when I’ve made it. Next I’m going to try to slice the frames in interesting ways. It seems there are quite a few undocumented features in 1.0, I’d be happy to help out adding documentation for it.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [September 8, 2020, 7:08pm UTC](https://discourse.processing.org/t/animated-gif-loading-in-version-1-0-of-p5-js/23744/2 "2020-09-08T19:08:21Z")

</div>

Hello @jgl,

Nice work digging in the source code. I think it is already documented though: [`setFrame()`](https://p5js.org/reference/#/p5.Image/setFrame).

---

<div class="post-metadata">

**Author:** ![jgl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jgl/32/3401_2.png) [@jgl](https://discourse.processing.org/u/jgl)\
**Post date:** [September 8, 2020, 7:26pm UTC](https://discourse.processing.org/t/animated-gif-loading-in-version-1-0-of-p5-js/23744/3 "2020-09-08T19:26:00Z")

</div>

You are completely correct! 🙇🏻‍♂️‍♂

I didn’t find it because it isn’t listed here:

[https://p5js.org/reference/](https://p5js.org/reference/)

Rather only here:

[https://p5js.org/reference/#/p5.Image](https://p5js.org/reference/#/p5.Image)

I’ll see if I can find out how to add the reference to the p5.image methods to the main reference index!

Joel