Controlling Animated .gif Files

Xway
1

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.

2

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

3

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.

4

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
5

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
6

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
7

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
8

Hello,

Thanks to all for the useful and educational feedback. I have only just gotten back to re-visit it again.

The initial challenge was for a webpage header of an animated character to give a ‘wave’, every now and then, be cute enough to notice, but without the distraction of being on an annoyingly short loop where the wave would get old very quickly.

At the beginning of this exploration, it was thought that the solution would lay in ‘mousing over’ to activate the animation or setting the file to an infinite ‘Loop’ with a longish 20 to 30 sec pause between waves.

It has now been decided that in this particular circumstance, the webpage header will present better by playing out the animation one time only, then hold until either a re-load or each new page is visited.

Regarding the HTML5 vs MP4 / WebM info. Good to know that Safari will play the movie files when the settings mentioned, are applied.

This meant I could happily re-consider an .MP4 solution vs .GIF again, and placed them both side by side in the webpage header to test the results.

Both versions now play and hold when navigating to a new page, then replay when visiting a new page on the site.

Both have been optimised for size and timing within the animation file.

As pointed out by others, the .MP4 file is very much and significantly smaller when optimised than the optimised .GIF

The .GIF starts and stops perfectly, with no flashing frames, but really isn’t as good on file size and quality. It is a much noisier image than the .MP4 with it’s limited colour palette.

The .MP4 looks great, is nice and compact in file size, but momentarily flashes a white frame when it begins to play (or maybe it is a ‘no frame’ since the page background is white) The animation is checked and is good in an ordinary media player, but on playback in the webpage it does the first frame flash thing.

It was suggested somewhere else that putting a 1px white border around the .MP4 would automagically fix it … not sure why or how that would work, but no go for me anyway.

I will be going with the .MP4 for the size and quality as this best fits the specifications for the task.

However, even though we can live with the .MP4 first frame flash, as it is kind of hidden by the new page opening, (it isn’t terrible), it would be great if there were any solutions for this too.

Thanks again to all who contributed earlier advice or solutions.

9

Hi Blue,

Do you have a link for the flashing video?

Have you checked that it doesn’t contain a white frame?

Otherwise, you could try adding a dark background colour to the video box.