Adding an Animated GIF

Hello Group,

As many of you know, most responsive web designs, and most startup screens on abs, now include HD animated GIFs. I have been trying to add, import, create, or marginally make this happen within my prototype. However, I get the first frame, the first frame only, and nothing I can do will instantiate the animation.

I apologize for the remedial questions; I am a software engineer trying to illustrate a point, rather than spending days or weeks writing the actual code, just to have someone be fussy about it later. lol

Thank you for all of your help!

Respectfully…

apps* (lol)

The GIF is included in the page as soon as it is loaded and will immediately play whether or not it is visible to the user. Is the GIF visible on load of the page or are you hiding it until some action happens? Are you sure it’s an animated GIF (silly question but have to ask)?

This is for version 6 but should still apply: http://www.axure.com/c/forum/6-x-general-discussion/4983-answered-setting-dynamic-panel-state-triggers-animated-gif.html

1 Like

So, inspired by your answer – I tried the following, and it worked:

First, I dropped the animated GIF on the page. In order for it to do what I wanted it to do, as deliberately as I wanted to do it. I right-hand mouse clicked and turned it into a dynamic panel; then placed it properly within the layer and set the condition ‘OnPageLoad’ to be shown. That way, it tells the otherwise (unbeknownst to it) un-animated to behave in its normal animated state.

What is also interesting, is that I’ve been able to create-and-set conditions to make the GIF play once, and stop despite the fact that it’s a looping file.

Thank you for the inspiration, thank you for the help, and my situation appears solved!

1 Like

Hello everyone,

I’ve got the same problem but unfortunatly I can not solve it. I put the animated GIF on my site but when I want to see it in the Preview mode the animation doesn’t start. I tried to follow the instructions like in the answer of TheCypherpunk:

  1. place the gif via drag and drop
  2. right-hand mouse click and turned it into an dynamic panel
  3. I clicked on the Image and set it on OnPageLoad > Show (Image)

but still it doesn’t work

It would be great if someone could help me with the problem.

Hi lena_lachsbrot,

When importing the GIF into your RP file, would you happen to be optimizing it at all? If so, could you try importing the GIF without optimizing it (clicking “No” if the option pops up) to see if that helps?

If that still doesn’t allow the GIF to play as expected, would you be able to attach both the GIF file and the RP file you’re currently working with? Having those files should allow us to get a closer look at what might be going on. Thanks!

Exactly, the optimizing-option seemed to be the problem. Thank you very much for your help!

i cant see the ans i am facing the same problem pls help

Hi devsalunkhe!

Can you attach a copy of your RP file and a separate copy of your animated GIF? We’ll be happy to help troubleshoot your files. Thank you!

Hi there,

I am currently creating a prototype with GIFs within, and have no idea how to allow the GIFs to be visible / enabled OnPageLoad. I see that there is a link here (http://www.axure.com/c/forum/6-x-general-discussion/4983-answered-setting-dynamic-panel-state-triggers-animated-gif.html) that has been archived and would certainly be helpful. Any idea how i can access archived threads? Otherwise, does anyone have an answer to this?

Need this badly! Otherwise my gif starts midway when i land on a screen. Any help would be greatly appreciated. Thanks!

Hi there,

I am currently creating a prototype with GIFs within, and have no idea how to allow the GIFs to be visible / enabled OnPageLoad. I see that there is a link here (http://www.axure.com/c/forum/6-x-general-discussion/4983-answered-setting-dynamic-panel-state-triggers-animated-gif.html) that has been archived and would certainly be helpful. Any idea how i can access archived threads? Otherwise, does anyone have an answer to this?

Need this badly! Otherwise my gif starts midway when i land on a screen. Any help would be greatly appreciated. Thanks!

Hi, dionneljy. One way to control the start time of an animated GIF is to use the “set image” action. When you set a placeholder image in the file to an animation, it will play through from the beginning. The attached file has some variations on this. The animation in each case comes from a non-looping GIF.

non-looping animation.rp (58.3 KB)

Hope this helps.

Jeff

2 Likes

Sup RP fam. Remember not to add any behavior to the “Configured Actions” panel when placing your image. Example: do not tick off “animate” or “bring to front” as Axure will then add their own markup to your Gif. Just place it in–I find this works in Google Chrome.

IE & Gifs in Axure
IE does not animate my gifs. Unfortunately this does not pan well when Stakeholders are using IE so still shopping for a cross-browser solve without affecting performance too bad.