Skip to main content
daniel_sposato
daniel_sposato
Known Participant
December 17, 2014
Question

Non-looping animated gif issue....

  • December 17, 2014
  • 5 replies
  • 2044 views

Hi, I have an issue with animated gif files where they do not replay correctly when I return to the slide that contains them. They play fine the first time viewed, but not if you return to it. It seems the only way I'm able to keep the gif playing is if I set it to endlessly loop. And if I do that, the animation doesn't start from the beginning when I return to the slide. I just want the animation to start over and play from the beginning once every time I go back to the slide.


My animations were made in Flash and exported as gif animations. I'm using Captivate 7 and my client needs the course to be all HTML5 (no Flash).


Has anyone been able to get a animated gif (not set to loop) to play correctly (meaning from the beginning of it) if you return to the slide after viewing it already?

Thanks,

Dan

5 replies

A
Arno Vereecken
Participant
November 13, 2025

Hi there everyone.

Im no coding expert, and a decade late, but i have found something with the help of our good friend ChatGPT.

I read through this post and asked gpt to let me reload the image on slide revisit. All i had to do was preview my project and inspect the page to find the id. This is the my id for the project: objectRendersi10153

 

I then need to run following JScode on slide enter: 

 

(function () {

// Exact id from your HTML
var img = document.getElementById("objectRendersi10153");
if (!img) {
console.log("Animated image not found");
return;
}

// Get original file once and remember it
var baseHref = img.getAttribute("data-base-href")
|| img.getAttribute("href")
|| img.getAttribute("xlink:href");

if (!baseHref) {
console.log("No href on animated image");
return;
}

if (!img.getAttribute("data-base-href")) {
img.setAttribute("data-base-href", baseHref.split("?")[0]);
baseHref = img.getAttribute("data-base-href");
}

// Force a restart by changing the URL
var newHref = baseHref + "?t=" + Date.now();

// Optional: clear first, then reapply
img.setAttribute("href", "");
img.setAttribute("xlink:href", "");

// Tiny reflow nudge
try {
void img.getBoundingClientRect();
} catch (e) {}

img.setAttribute("href", newHref);
img.setAttribute("xlink:href", newHref);
})();

 

Changing the image does not make the code invalid. I've tested it with both GIF and animated PNG.

 

hope this may help someone.

 

A
Arno Vereecken
Participant
November 13, 2025

I've asked for a general code that just reloads all images on the slide in that way. This way you dont have to dig through the code to find the unique ID's. From my knowledge this shouldnt cause any problems, and if the image is static it wont even be noticable so its just a handy tool for those non repeating animated images. 

 

(function () {

// Restart every <image> element on the slide
document.querySelectorAll("image").forEach(function (img) {

var baseHref = img.getAttribute("data-base-href")
|| img.getAttribute("href")
|| img.getAttribute("xlink:href");

if (!baseHref) return;

if (!img.getAttribute("data-base-href")) {
img.setAttribute("data-base-href", baseHref.split("?")[0]);
baseHref = img.getAttribute("data-base-href");
}

var newHref = baseHref + "?t=" + Date.now();

img.setAttribute("href", "");
img.setAttribute("xlink:href", "");

img.setAttribute("href", newHref);
img.setAttribute("xlink:href", newHref);
});

})();

S
SVinLV2
Participant
May 31, 2022

8 years later . . . no fix? This is super annoying. 

markw57746223
markw57746223
Participating Frequently
June 26, 2019

Did anybody ever figure this out? I am using an animated gif on 20 different slides. It only plays on the first one. If I make it loop it plays on all 20, but doesn't start at the beginning every time. I've tried adjusting it on the timeline to make it play once entirely, but it doesn't seem to take care of the issue. I might just try making 20 versions of it and using a different one on each slide. Seems like there should be an easier way.

This thread is from 4.5 years ago and the problem continues.

- mark -

Mark_W
David J.
David J.
Inspiring
January 8, 2015

I am getting the same effect.

David J.
David J.
Inspiring
January 9, 2015

Submitted this issue to the bug database.

TLCMediaDesign
TLCMediaDesign
Inspiring
January 9, 2015

I think you are going to need to reload the src of the container holding the gif using jQuery/JavaScript so that it thinks it new. It's more of a broswer issue than anything in Captivate.

Captiv8r
Captiv8r
Legend
December 17, 2014

Hi Dan

I've not tested this, but I wonder if you were to hide the GIF, then show it again if it would somehow "reset" the animation? Perhaps on slide exit hide it, then show it on slide enter?

Might not work, but certainly worth a try.

Cheers... Rick

    daniel_sposato
    daniel_sposatoAuthor
    Known Participant
    December 17, 2014

    Hey Rick, thanks for your reply. I liked you idea and had hope, but I tried this and it had no effect. What I have figured out from testing however is that if I go back 1 to 5 slides and return to the animation slide it doesn't reset and just shows the last slide of the animation only. But if I go back 6 or more it does reset the animation. That's very strange! I tested this several times and got the same result. I wonder if there is a buffer of memory of some sort that drops slide info after 5 slides? Or something stranger?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices