What I'm trying to achieve is interactive animated logo. By default it's on frame 1. When hovered, it plays forward and stops at last frame. On mouseleave it plays from last frame to first (backwards) and stops at first frame. If mouseleave during forward animation -> get current frame and play backwards.

I tried to do this using canvas and sprites but it's very challenging. In fact I don't really understand it. I tried this plugin, but it's possibilities are limited.

So I am wondering if I can do it using GIF? Maybe I could get current animation frame and play gif backwards from that frame?

What I'm trying to achieve is interactive animated logo. By default it's on frame 1. When hovered, it plays forward and stops at last frame. On mouseleave it plays from last frame to first (backwards) and stops at first frame. If mouseleave during forward animation -> get current frame and play backwards.

I tried to do this using canvas and sprites but it's very challenging. In fact I don't really understand it. I tried this plugin, but it's possibilities are limited.

So I am wondering if I can do it using GIF? Maybe I could get current animation frame and play gif backwards from that frame?

• javascript
• jquery
• animation
• canvas
• animated-gif

• 1 This isn't possible with a GIF. A sprite would be the best method. – Rory McCrossan Commented Sep 7, 2016 at 16:19
• A GIF only has two states: playing or not playing. It is not possible to pause/reverse a GIF programatically. – APAD1 Commented Sep 7, 2016 at 16:24
• Possible duplicate of Stop a gif animation onload, on mouseover start the activation – APAD1 Commented Sep 7, 2016 at 16:25

2 Answers 2

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

html:

```

    <div id="controller-bar">
      <button id="backward" href="#">|< Step back </button>&nbsp;&nbsp;
      <button id="play" href="#"> Play | Pause </button>&nbsp;&nbsp;
      <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());
})

```

I have solved the problem by creating a library that takes a sequence of image frames (sprite) and animates it:

sprites.js