Making animated GIF only loop once using JavaScript

Question

I'm trying to make an introductory animated logo on a website, and I would just like the animation to play through once then trigger a short script that will reveal a "Continue" button. I was hoping there would be a way in the HTML to just tell the GIF to only cycle once, but I cannot find any such attribute or tag. So now I can't find any kind of trigger function after the GIF finished animating, and it's driving me crazy!

I would appreciate any help either solving this issue or being directed to a better animation format to get around all this nonsense.

Answer 1

I've looked through the code on http://gifshake.com, and it looks like that site uses http://gifshake.com/assets/application-0d2f240603d4b373f1d6768aa71baf42.js to convert its gifs to an interactive canvas. In case you're wondering, the code they use is:

var sup1 = new SuperGif({ gif: document.getElementById('thegif') } );
sup1.load();

where the element with id="thegif" is an image with the src attribute that contains the url to the gif image. Anyway, I think there's no real easy way to control a gif like that, other than importing those same libraries as they do. For a situation like yours, I don't think that's the most practical solution though. You'd be best off simply editing the gif in an image editor such as GIMP and setting it to play just once, instead of infinitely. You can do that by opening the GIF, then pressing Ctrl+E (export), and save it as a gif. Then when changing the further options, save it as an animation and uncheck the checkbox that says 'Loop forever'. I hope that helps.

TL;DR: It's not possible to do this with an overseeable amount of JavaScript alone; you're better off simply editing the gif yourself.