Can You Control Gif Animation With JavaScript

Can you control GIF animation with Javascript?

You can do it with a single image using CSS sprites.

Control GIF animation with JS. Play, stop, play backwards

Yes, you can control gif with some js lib, like this: https://github.com/buzzfeed/libgif-js

html:

```

    <div id="controller-bar">
      <button id="backward" href="#">|< Step back </button>  
      <button id="play" href="#"> Play | Pause </button>  
      <button id="forward" href="#"> Step forward >|</button>
    </div>

```

javascript(using jQuery):

```

var gif = new SuperGif({
  gif: document.getElementById('example'),
  loop_mode: 'auto',
  auto_play: true,
  draw_while_loading: false,
  show_progress_bar: true,
  progressbar_height: 10,
  progressbar_foreground_color: 'rgba(0, 255, 4, 0.1)',
  progressbar_background_color: 'rgba(255,255,255,0.8)'

});


gif.load(function(){
  document.getElementById("controller-bar").style.visibility = 'visible';
  loaded = true;
  console.log('loaded');
});


$('button#backward').click(function(){
  console.log('current: ', gif.get_current_frame());
  var total_frames = gif.get_length();
  gif.pause();
  if(gif.get_current_frame() == 0) {
    gif.move_to(total_frames-1);
  } else {
    gif.move_relative(-1);
  }
  console.log('next: ', gif.get_current_frame());
})


$('button#play').click(function(){
  console.log('iam play');
  if(gif.get_playing()){
    gif.pause();
  } else {
    gif.play();
  }
})

$('button#forward').click(function(){
  console.log('current: ', gif.get_current_frame());
  gif.pause();
  gif.move_relative(1);
  console.log('next: ', gif.get_current_frame());
})

```

How to control gif in a webpage?

  $('.gifs a').embedly({
      display: function(obj){
        if (obj.type === 'photo'){

          var $this = $(this);

          // Create the static image src with Embedly Display.
          var src = $.embedly.display.display(obj.url, {query: {animate:false} });

          // Add static gif placeholder to the parent
          $this.html('<img class="gif-holder" src="'+src+'" />');

          // Start preloading the actually gif.
          $this.append('<img class="gif-preload" src="'+obj.url+'" />');

          // Create a promise so we can keep track of state.
          $this.data('promise', $.Deferred());

          // Get the element we added.
          var elem = $this.find('.gif-preload').get(0);

          // If the image is not in cache then onload will fire when it is.
          elem.onload = function(){
            $this.data('promise').resolve();
          };

          // If the image is already in the browsers cache call the handler.
          if (elem.complete) {
            $this.data('promise').resolve();
          }
          // Set the static gif url so we can use it later.
          $(this).data('static_url', src);
        } else {
          // remove li if it's not an image.
          $(this).parent().remove();
        }
      }
    }).on('mouseenter', function(){
      var $this = $(this);

      // Set the hover state to true so that the load function knows to run.
      $this.data('hover', true);

      // Create a function to load the gif into the image.
      var load = function(){
        if ($this.data('hover') === true){
          // Remove the loading image if there is one
          $this.find('.gif-loading').remove();

          // Swap out the static src for the actually gif.
          $this.find('img.gif-holder').attr('src', $this.data('embedly').url);
        }
      };
      // Add the load function to the done callback. If it's already resolved
      // this will fire immediately.
      $this.data('promise').done(load);

      // Add a spinner if it's not going to play right away.
      if ($this.data('promise').state() === 'pending'){
        // Add a loading spinner.
        $this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>');

        // we need to center it over the image.
        $this.find('.gif-loading').css({
          top: $this.height() / 2 - 20,
          left: $this.width() / 2 - 20
        });
      }
    }).on('mouseleave', function(){
      var $this = $(this);

      // Make sure the load function knows we are no longer in a hover state.
      $this.data('hover', false);

      // Remove the spiner if it's there.
      $this.find('.gif-loading').remove();

      // Set the src to the static url.
      $this.find('img.gif-holder').attr('src', $(this).data('static_url'));
    });

Giving best animation You can use these codes in java script file

How to play a gif only on onclick in javascript

Here you go :

number = 0;var animations = ['https://image.ibb.co/epha5A/giphy.gif',  'https://image.ibb.co/epha5A/giphy.gif',  'https://image.ibb.co/epha5A/giphy.gif'];

 var refreshIntervalId = setInterval(function() {  image = document.getElementById('hiddenimageid');  image.src = animations[number];},1)

function character() {clearInterval(refreshIntervalId);  image = document.getElementById('hiddenimageid');  image.src = animations[number];
  console.log(number);  number++;

}

.board {  position: absolute;  top: 4.3vh;  left: 10vw;  cursor: pointer;}
.board img {  width: 35.3vw;  height: 45.5vh;  border-radius: 15%;}

<body onclick="character();">
  <div class="board">    <img src="" id="hiddenimageid" />  </div></body>

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>

https://itnext.io/creating-css-animations-using-sprite-sheet-47e2b7a3793c