Animated GIF's play only the first time their scene is visited

[tonywendice]

Hi.

I have an animated GIF that is set to play just once rather than loop. Placed within a scene it plays as you would expect. When I navigate away from the scene, and then back again, the GIF does not play again, it just displays the last frame.

This could be useful for some situations but I would ideally like it to trigger every time the scene is visited (which I would have expected to be the default). Is there a way to achieve this without any clever timeline jumping to force it?

Thanks.

[Daniel]

(EDIT: This won't work -- see below )

You would need to set a On Scene load action to set the inner HTML of an element to contain the image. When this is set, the image will be re-added to the DOM and will play from the beginning:

document.getElementById("imgcontainer").innerHTML = '<img src=" ${resourcesFolderName}/img.gif">';

[tonywendice]

Thanks Daniel.

I have not had any luck with this one i'm afraid. Attached is a simple working file to test the process. Are you able to shed light as to where I am going wrong?

hype.zip (1.0 MB)

[MarkHunte]

There is a Typo on @Daniel 's code.

It has an extra '='

It should be;

document.getElementById("imgcontainer").innerHTML = '<img src="${resourcesFolderName}/test.gif">';

Although this method does not work how we would expect to, which may be down to browser caching

[tonywendice]

Thanks Mark. Yes that has fixed the pulling in of the image, but as you say, the refreshing of the GIF does not occur. Do you have any other ideas how I might achieve this?

Thank you.

[MarkHunte]

It sometimes works in Safari, even with just the gif and no code. Chrome no go either way.

Bu still looking

[Daniel]

This is a good thread on this topic:

Proper way to reset a GIF animation with display:none on Chrome

The query string option seems like the best method.

[MarkHunte]

just came back to this.

I got one of the ideas working. I actually tried this this morning but used the pure date instead of the just the time, which did not work.

	var d = new Date();

	hypeDocument.getElementById("imgcontainer").innerHTML = '<img src="' + '${resourcesFolderName}/test.gif?dummy='  + d.getTime() + '">';

test_MHv1.hype.zip (551.3 KB)

[tonywendice]

Thanks Mark that's great.

Does this method require the .gif to be reloaded every time? Don't mind either way, just wondered.

Thanks again.

[MarkHunte]

Yes it does.

The transfer MB goes up each time the gif loads. Which is about 526kb each time.

I broke the gif out into 101 frames and added each separated image to the resources.

Then ran a new javascript to load them into a rect as the background image.

var imageNumber = 1;

	var imgcontainer = hypeDocument.getElementById("imgcontainer")

	var fireImage = setInterval(function(){ 

imageNumber++
	
	 
	 if (imageNumber < 100){ //-- image total is 101 
	 imgcontainer.style.backgroundImage = 'url( ${resourcesFolderName}/test_' + ('0' + imageNumber).slice(-2) + '.gif)'
	 } else {
	 
	 clearInterval(fireImage);
	  
	 }
	
	

 }, 33);

This works of the bat and does not up the load weight.

test_MHv2.hype.zip (1.5 MB)

[h_classen]

hi marc,

you should also clear the interval when leaving the scene before the animation is complete. also may consider requestAnimationFrame insteadof setInterval

Best day

Hans

[MarkHunte]

requestAnimationFrame

leaving the scene before the animation is complete

Good call.

requestAnimationFrame

I have seen people mention this but not used it before. Do you have a good example of the coding ( maybe using the example above )

[MarkHunte]

Ahh found a good example.

So the code ( single code used on scene load and unload ) would look something like

if (event.type === "HypeSceneLoad" ){ //- Run animation
 
	var imageNumber = 1;
	 
	var imgcontainer = hypeDocument.getElementById("imgcontainer")
	
window.globalID;
repeatOften()

function repeatOften() {
   if (imageNumber < 100){ //-- image total is 101 
	 imgcontainer.style.backgroundImage = 'url( ${resourcesFolderName}/test_' + ('0' + imageNumber).slice(-2) + '.gif)'
	 imageNumber++
	 } else {
	 
	 cancelAnimationFrame(window.globalID);//- Stop animation call
	  
	 }
  window.globalID = requestAnimationFrame(repeatOften);
}
 
}else {

console.log("stopped")
 cancelAnimationFrame(window.globalID); //- Stop animation call

}

test_MHv3.hype.zip (1.5 MB)

I assume this is better because it works on the natural frame rate of the browser which is what this example is aiming for, so thats why it is better in this case ?..