Start a new topic

How to display Animated GIF?

How to display Animated GIF?

1 person has this problem



I am trying to display animated GIF and so far not successful with it. I am trying to use AnimatedImageDrawable it does not help. May I ask for advice or code example on how you display animated gif files in your architect worlds? 


Here is a URL to GIF file I am trying to work with:


 var the_image = new AR.ImageResource("");

 var overlayOne = new AR.AnimatedImageDrawable(the_image, 5, 40, 50, {

    enabled : false,







// Later in my code I add overlayOne to camera view: 





Thank you. 



Hi Sergey,
The .gif you're using does not work with our SDK. We do support loading of .gif files but do not 'play' them. You can try to create a HTMLDrawable and set it's content to only the .gif. That should work.

Best regards


Hello Andreas,

As u suggested to use Html Drawable for .gif images. I was trying the below code but it did not work and gives error. and also i want to user the html drawable on poi .

my code is:

World.markerDrawable_idle = new AR.HtmlDrawable({html:"<img src=assets/sticker_1.gif></img>"}, 1, {
translate : { x: 1 },
onClick : function() {
opacity : 0.9


and it gives the error: file not found at url "assets/sticker_1.gif" but file is already there. 

Hi Swapnil,

You need to put the absolute path of your url in brackets ''.



Hello Eva,

 I am Giving the absolute path but it is not showing the gif..

can you post some sample code. 



Hello Swapnil,

I apologize but when you posted the code I saw the error with the brackets and failed to see that you are actually trying to use a .gif as an ImageDrawable. We do not support gifs and this is why you still do not see anything. If you want to have an animated image then you can also have a look at our sample here where we use sprite sheet for animated images.



GIF is not working with the latest version of Chrome (>= 66.0) in Android. I am using HtmlDrawable to render it.

Hi Prafulla,

Since you are using HTMLDrawables, which se strongly recommend not to as they might behave differently on different devices and there is no guarantee that the augmentation is looking or behaving the same on different devices, do you think it would be possible that you switch and use AnimatedImageDrawables?

If not then, could you please send over a minimum version of your project so that we can further investigate the issue?



Thanks, Eve for replying me. Well, this time I can't change the code. So, it's hard to use AnimatedImageDrawable. A project is working with Android OS 6.0 with any Chrome updates. But from OS 7.0,  WebView is directly connected with Chrome version as per Android developer documentation i.e whenever Chrome updates, WebView's features also updates. So, for any version of Chrome below 66, WebView is rendering gif's animation. 


Could you then please send over a minimum version of your project so that we can further investigate the issue?


Hi Eve, 

PFA JS file where we wrote the animation code. We are using HTMLDrawable for running gif.


 You can check the following snippet 


else if ((arCharacter['local_path']).indexOf(".gif") !== -1) {
                var gifWidth = arCharacter['width']
                var gifHeight = arCharacter['height']
                console.log("width ##" + gifWidth)
                console.log("height ##" + gifHeight)
                console.log("gif loaded ##" + arCharacter['local_path'])
                var imgSourceHtml = "<head><meta name=\"viewport\" content=\"target-densitydpi=device-dpi, width = " + gifWidth + ", user-scalable = 0\"> </head><body><span style=\"display: block !important; width: " + gifWidth + "px;\"><img src=" + arCharacter['local_path'] + "  width=" + gifWidth + "/></span></body>"
                //let imgSourceHtml = "<p style=text-align:center;> <img src=" + arCharacter['local_path'] + " height= "+ arCharacter['height'] +" width="+ arCharacter['width'] ></img></p>"
                console.log("imgSourceHtml##" + imgSourceHtml)
                this.arModelObjects[i] = new AR.HtmlDrawable({ html: imgSourceHtml }, 0.7, {
                    backgroundColor: "#00000000",
                    viewportWidth: gifWidth,
                    viewportHeight: gifHeight,
                    translate: {
                        x: arCharacter['XCordinate'],
                        y: arCharacter['YCordinate']
                        //  z: arCharacter['ZCordinate']
                    scale: arCharacter['ScaleFactor'],
                    clickThroughEnabled: false,
                    horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
                    verticalAnchor: AR.CONST.VERTICAL_ANCHOR.MIDDLE,
                    allowDocumentLocationChanges: false



What I observed that Webview method is supporting the  Chrome's updated version to render gif perfectly. But HTMLDrawable is not supporting the Chrome's updated version. Please check AR.HtmlDrawable.


As mentioned already and as the HTMLDrawables are very platform and browser dependent and with this type of augmentation the rendering might change with changes of e.g. the Browser version.

Can you please provide you complete AR experience (all assets, js, html, css files) so we can use it to reproduce the exact issue you're facing and check if there is something we can do about it? 

Thx and greetings


Login or Signup to post a comment