# Animated gif don't work with createImage () P5.Image?

**URL:** <https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913>\
**Category:** p5.js\
**Created:** [March 22, 2020, 10:12pm UTC](https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913 "2020-03-22T22:12:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nazimba](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nazimba/32/8500_2.png) [@nazimba](https://discourse.processing.org/u/nazimba)\
**Post date:** [March 22, 2020, 10:12pm UTC](https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913/1 "2020-03-22T22:12:50Z")

</div>

I’m trying to create an animated gif to display within an image created with createImage () but it apparently doesn’t work with the great new gif update made for p5.js? Is this possible? Or am I forgetting something?

```auto
let img, gif;

function preload() {
  gif = loadImage('assets/test.gif');
}

function setup() {
  createCanvas(960, 540);
  img = createImage(320, 180);
}

function draw() {
  img.image(gif,0,0);
}

```

---

<div class="post-metadata">

**Author:** ![nazimba](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nazimba/32/8500_2.png) [@nazimba](https://discourse.processing.org/u/nazimba)\
**Post date:** [March 23, 2020, 12:55pm UTC](https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913/2 "2020-03-23T12:55:55Z")

</div>

I have even been able to verify that you cannot mask an animated gif with the mask () function either;  
[https://p5js.org/reference/#/p5.Image/mask](https://p5js.org/reference/#/p5.Image/mask)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 29, 2020, 3:23pm UTC](https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913/3 "2020-03-29T15:23:18Z")

</div>

Perhaps look at:

> **[antiboredom/p5.gif.js](https://github.com/antiboredom/p5.gif.js/tree/master)**
>
> let's you play gifs in p5. Contribute to antiboredom/p5.gif.js development by creating an account on GitHub.

Also, you could try rendering your current gif state on a Graphics each frame and then masking that (untested)  
[https://p5js.org/reference/#/p5.Graphics](https://p5js.org/reference/#/p5.Graphics)

---

<div class="post-metadata">

**Author:** ![nazimba](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nazimba/32/8500_2.png) [@nazimba](https://discourse.processing.org/u/nazimba)\
**Post date:** [March 29, 2020, 3:26pm UTC](https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913/4 "2020-03-29T15:26:02Z")

</div>

Hi! Animated gif has his own P5.js implementation already. But there are many details to polish…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 29, 2020, 3:48pm UTC](https://discourse.processing.org/t/animated-gif-dont-work-with-createimage-p5-image/18913/5 "2020-03-29T15:48:41Z")

</div>

If you want to dig into what it currently can / cannot do:

> <https://github.com/processing/p5.js/pull/3740>

Looks like it draws the gif frame to the drawing context…?

> <https://github.com/processing/p5.js/blob/19b053252c74165cc73e8f470eba5e827c1c4af0/src/image/p5.Image.js#L227-L250>

So if you want to mask, draw frame to Graphics and then mask it should work (untested).