Replaying a non-looping gif

Daniel Carrol asked me if i knew a way to replay/restart a non-looping gif in Lectora. Codewise that wasnot too difficult, the biggest challenge is to target the proper element in the html.

Using Firebug or other browser development tools ( both IE and Chrome have them too ) you can check what html name an element has…where the source for it resides… and then you know what to target.

If you check my code, you see that when the document is loaded i target the source for the gif here:

explosionGif = document.getElementById(“anim39”).getElementsByTagName(‘img’);

In Lectora you can see what html name the container/placeholder for the Gif animation gets ( animimage39 ), and then you know what to call with your javascript to target the source gif.

Actually i do think using spritesheets would be better for this kind of animation. Will make a sample of that soon…


Preview image

Tags: , , ,


  1. Profile photo of Sergey Snegirev
    Sergey Snegirev

    There is an easier way (for a non-developer) to check the HTML name if they want to reuse the code. In Lectora, select the GIF animation, go to Properties tab, locate the IMAGE section on the left hand side of the ribbon, click the little “pop-out” arrow icon in the bottom right corner of that section. It will show the HTML name for that object. Or you can just hover mouse over that icon.

  2. Profile photo of Math Notermans
    Math Notermans Post author

    As Sergey mentioned indeed the easiest way to indeed check the HTML name.
    But in this case that gives you the name of the placeholder Lectora uses for displaying inside the editor. In my sample that is animimage39. Targeting that name gives no result when you want to change the source of the gif. But for most html elements using it as Sergey mentions you can work with that name…

  3. Alex Mathews

    Any chance you can show/explain the way you are applying this code? I have a Gif of a card being taken from the top of a deck of cards, which I want to repeat each time I click on a “Take Card” button. Using the technique Sergey has described above, I have found that the name of my animation is: animimage111508.gif

    So I now have this: takecardGif = document.getElementById(“animimage111508”).getElementsByTagName(‘img’);

    But what should I be doing with the “takecardGif” variable that I have created?

    I tried this (found on Stackoverflow):

    var filmGif = document.getElementById(“animimage111508”).getElementsByTagName(‘img’);
    img.src = filmGif;

    window.restartAnim = function () {
    img.src = “”;
    img.src = filmGif;

    But it doesn’t seem to work?!?!

    Any help would be greatly appreciated.

  4. Alex Mathews

    I have subsequently downloaded your demo awt. file (since leaving my previous comment). I think I should be able to work it out now, however, I’m trying to work out exactly how much of the JS you have included is necessary. Do I need to include the jquery files in my project for instance?

    The main bt I want to use is just the “resetGif” function.

    Any help will be greatly appreciated.

  5. Alex Mathews

    Hi Again,

    I just wanted to post about how I have used your great “restart Gif” code (in lectora and JS). I’ve managed to get it all working. In response to my previous comment about what you need to keep and what you don’t… The short answer is that it’s easier to keep the lot however, I did manage to remove all of the Debugging stuff as I didn’t need it (Just deleted any reference to “debug”. FYI)

    Only issue I’ve got is that I get this error when I inspect it in the browser, but it doesn’t seem to affect anything, so I will get back on it after I’ve done all the heavy lifting.

    Uncaught TypeError: Cannot read property ‘Scene’ of animation.gsap.min.js:3

    I’ve noticed that there may be a few more files required for the plugin to run without the error, but it doesn’t stop it from working.


  6. Profile photo of Math Notermans
    Math Notermans Post author

    You might have deleted some of the GSAP JS-items that cause that error. If you deleted all the Debug elements in the .awt you probably can delete the textplugin for GSAP because thats not needed anymore. Also the jquery and GSAP files inhere might be older, if you downloaded new versions from GSAP site then these…and conflict at some points. I dont think the animation.gsap,min file is not needed anymore in newest GSAP version..

  7. Profile photo of Math Notermans
    Math Notermans Post author

    Actually after testing the version thats live here in Chrome, Firefox and IE, its apparently a Chrome-issue. Only Chrome gives that error and it might have to do with Chrome updates and security. Best to get your own set of recent GSAP-files and rebuild it with the newer version…cause this sample is quite old.

Your email address will not be published. Required fields are marked *