Animated GIFs not working in Chrome


(Kevin Langer) #1

I’m running into an issue getting an animated gif to display when in Chrome. I have a gif set in a symbol. If I preview in Chrome, or export file and then view in Chrome, the animation does not happen. The file works perfectly fine in Firefox. I even had a coworker try it with his Chrome and it didn’t work for him either. The gif file will display just fine when viewed in Chrome, it is just when put into a Hype file that it does not work. Is there a certain setting to get them animated in Chrome properly?

Here is the file I working on.
07-mobile-survey.hype.zip (2.7 MB)


#2

Chrome and gifs don’t play well when set as a styled background-image. Instead of dragging the image into the Hype scene (this basically sets a rectangle element with the background as an image) try adding a rectangle element but put the following inside the innerHTML. (⌥⌘E)

<img src="${resourcesFolderName}/mobile-survey-screen.gif" style="width: 100%">

(Kevin Langer) #3

This worked! Thank you very much!

On a side note, if you have the rectangle element with the HTML for the GIF in your Hype doc and visible, the old GIF will animated as well. If the rectangle element is not visible but still in your Hype doc, like just moving it outside the visible area, the old GIF will not work. Some funky code going on there.