how to pause animation when function is called?

Question

I have a moving animation, however I want to pause the animation when the pause() function is called through user clicking a button. Not sure how to do this, any help will be appreciated.

What I have:

function pause() {
console.log("paused ok");
}

and html:

<img src="image1.gif" alt="img1" id="img1" style="width:300px;height:300px;">
<input id=pausebutton  class="button" type="button" value="Pause" name="pause_button"  onClick="pause()">

Answer 1

Try this:

function pause() {
  console.log("paused ok");
  var animation = document.getElementById("img1");
  animation.pause();
}