Greetings. I have a situation that calls for some animated gifs. Created everything in After Effects and imported to Axure with no problems. But I am struggling with interaction.
It seems like they all kick off on page load. Is there a way to change that? For example, canI set them to hidden and then play on show? Any ideas?
Yeah, using animated GIFs in Axure can be tricky…
In general, a GIF animation starts not on page load, but when it first becomes visible. So, if you have an image widget that is hidden by default, the animation will not start until it is set to “visible”. Likewise, if you have an image widget in a non-default state of a dynamic panel (not the top-most state) then its animation will not start until that state is set (and image is visible.) This even works if you set the image to be visible but with an opacity of 0% and then later set its opacity to 1% or greater.
What gets frustrating is once an animated GIF starts, it’s off and running in a ballistic fashion. It will keep running even when it is later hidden. So, you can’t just show a GIF then hide it to stop or reset it. But, I’ve discovered a few tricks that can help.
I imagine this has to do with the way the browser handles GIFs, so behaviors may vary across browsers and OSs.
Some things I’ve found that help control animations:
You can restart/reset an animated GIF by loading that same image again. Do this with the “Set Image” action and import the same image file to your image widget.
You can reset an animated GIF with a “set selected / set unselected” method. First, drag in or import your GIF. Then create a selected style by importing that same GIF file. Each time you change the selected state, the GIF file will reload and start from the beginning. This is my recommended way to control GIF animation.
You can create a custom “image loop” by starting with a static image, then setting its selected style to an animated GIF. When you create your GIF animations, save the first frame as a PNG or static GIF. When you set the image to “selected” it will animate. When you set it to “unselected” it will look like it resets and stops.
Another way to create a static image of the first frame of a GIF is to crop it in Axure. This will convert it to a static PNG. So, just drag in your animated GIF, right-click it, select “Crop Image” then click the “Crop” button in upper right without moving the crop handles. Then, set the selected style to your animated GIF and you can start/reset it by toggling the selected state.
You can use the same methods above with a “loop once” version of your GIF and a “loop forever” version. Or, you can create “sub-loops” by saving out various frames and creating a dynamic panel with multiple states containing your different GIFs and/or animation frames.
You can gain more control by converting your GIF to an MP4 and/or saving your source as a video. Search the forums for ways to show an HTML5 video without user controls and control it with javascript. You can instantly jump to any frame or timecode, start, pause, reset, etc.
Lottie animations show great promise and have the ability to start, pause, reset, scale, recolor, etc. but I haven’t yet been able to easily use them in Axure. There is a method for using them posted in the forum, but it is not easy.