How to pause or play the animation of a GIF in JavaScript? [duplicate]

Question

How to pause or play the animation of a GIF in JavaScript? [duplicate]

this question already has answers here : How can I pause and play on a gif? (2 responses) Closed 10 months ago.

I am creating an HTML page that has an image in gif format and a music display just below it.

<div><img src="imagem.gif"/></div>
<audio>
    <source src="musica.mp3" type="audio/mpeg"/>
</audio>

I would like to know how I can pause the animation of the image when the user pauses the music and proceed with the animation while playing the music. Example:

audio = document.querySelector("audio");

audio.onpause = stopGifAnimation;
audio.onplay = startGifAnimation;

Is it possible to do this only with pure JavaScript ?

1

javascript gif animação

Author: JeanExtreme002, 2020-04-16

Source

1 answers

score 2 · Answer 1

I would recommend swapping the GIF for CSS Sprites (which you could even control a bit with :hover or another pseudo-class) or for <canvas> (this would be more complicated)

But a quick fix is lib https://github.com/buzzfeed/libgif-js (which internally uses CANVAS), and has the controls:

https://github.com/buzzfeed/libgif-js#play-controls

Example with controls:

<img id="example1" src="inicial.jpg" rel:animated_src="seu_gif.gif" rel:auto_play="0" width="467" height="375" />

<script type="text/javascript">
    var sup1 = new SuperGif({ gif: document.getElementById('example1') } );
    sup1.load();
</script>

<hr>

<button onclick="sup1.pause();">Pause</button> |
<button onclick="sup1.play();">Play</button> |
<button onclick="sup1.move_to(0);">Restart</button> |
<button onclick="sup1.move_relative(1);">Step forward</button> |
<button onclick="sup1.move_relative(-1)">Step back</button>