Controlling Animated .gif Files

Hello,
I have a webpage Header that currently has a Logo.png in it which works just fine.
I would like to try replacing it with an animated.gif and don’t want it to be an annoying and distracting eternal loop (which this image might otherwise be).

How would I, in Xway;

A: Have the animated.gif loop only for as long as a user hovers the mouse over the image.

OR

B: Alternatively have the animated.gif loop once or twice and then pause for some time before looping again (let’s say 10 or 20 secs).

I image that;
A: would work fine on a Laptop or Workstation, but perhaps not on a touch screen mobile device

AND
B: might be the better option to cover all devices.

The internet seems to encourage dropping the animated.gif for HTML5 video (MP4 and WebM formats), but it has been said that browsers like Safari are inclined to block these from auto-running - so at this point I am inclined to stick with the animated.gif unless this situation has changed. Totally open to whatever is the best modern solution.

I can get the animated.gif into my Xway project which loops constantly as expected, but haven’t worked out how to control it for either ‘Hover’ or ‘timed loops’.

I have found a number of useful sources online for adding these options to a website built from the ground up by people with brains the size of a planet, but haven’t worked out how I can insert this into into Xway.

Tried Inserting Markup (maybe not suitable in this case? Or entered in the wrong place)
Some suggestions require placing a static .gif over the top of the animated.gif and using CSS to switch between them. Some just seem to use HTML. I struggled to get the static image to sit on top of the animated image and then, didn’t really know where to insert the code.

Maybe there is a better way to do this in Xway than my so far feeble attempts.

I did refer to information regarding Video settings in the User Guide (p114 to 117), but either overlooked the obvious or wasn’t savvy enough to decipher what I may have needed for success.

Has anyone tried something like this in Xway who can advise on the best way to achieve this?

Thanks.

I’m not all that familiar with Xway, but if I was looking to do something like this in Freeway I would use a rollover I’d have a static logo shown by default and the animated one shown on MouseOver. Might give you another route to explore?

All the best

Gordon

Thanks Gordon. I’ll give that a little experiment.
Would still also like to try looping with a pause or hold between loops though if there is an effective way of achieving this too.

Unfortunately, animated GIFs cannot be controlled very much or well. When you make an animated GIF, you can set it to only play once, or to play forever, but that’s the limit of the control. I recall making some animated GIFs back in the day that would play three times, by dint of duplicating the animated frames three times, but set the file to play once.

The thing is – they don’t start playing at any controllable time. The moment they load, they start to play. So if the image is well down the page, and the visitor doesn’t scroll down to it until it stops playing, they will never see the show.

A browser can be configured to set the prefers-reduced-motion header, too, and that’s another way that the animation will be “controlled”, just not by you.

There are a lot of new animation controls that can be applied using CSS, and those have quite sophisticated timing and visibility-driven controls. They are also sensitive to the prefers-reduced-motion, or can be if you are being nice. (You should be paying attention to this signal, as the people who go out of their way to set that to On very likely have a good reason to do that.)

Depending on what your animation looks like and what it does, it is possible that you may be able to do something similar with CSS and animation timelines. The benefit to those is that they can be triggered by a user action, or by the element scrolling into view on screen, so they don’t suffer the kind of timing issues that a permanently animating GIF can give you.

Imagine if you have a mouseover image swap, as in the Rollover Action of yore in Freeway. Well, both images are on screen and in the DOM, and your animated image is animating away, going through its loop of frames. The user mouses over the static image, and it hides, revealing the animated GIF in the middle of its dance, not at the beginning. Depending on the animation, this may or may not make any sense in the context of the static image that just disappeared to reveal it.

Lots to think about here.

Walter

2 Likes

IOS Safari blocks videos from playing automatically unless they are silent (without an audio track) or muted (using the muted attribute) and the playsinline attribute is set. See Plays inline in the Audio/video settings section of the Xway User Guide: “Part of the motivation behind allowing muted videos to be played automatically is that videos are less expensive, in bandwidth and energy use, than animated GIFs.”

1 Like

On the subject of animated GIFs, these are image files that have multiple frames, or layers, which are shown one after the other.

I don’t think there is any way to control the animation of a GIF externally, but the format itself is designed to do pretty much what you want as a normal part of its behaviour, without and complicated external management.

Each frame in a GIF can have its own display timing, and the animation can be set to loop forever. This means you could have the first frame display for half a second (for example), then play the next half a dozen frames in quick succession to create a true animation effect, then have a final frame that displays for twenty seconds, then the whole thing loops around to play the sequence once more, on and on.

Whether they are better or not than video files is a separate discussion, but the format is definitely able to deliver what you want.

2 Likes

Also, because an animated GIF is simply an image file, all you need to do to show it in a page is insert it in exactly the same way that you would insert a JPEG.

1 Like