5

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?

Mykhailo
  • 1,134
  • 2
  • 17
  • 25
TwistedOwl
  • 1,195
  • 1
  • 17
  • 30
  • 1
    This isn't possible with a GIF. A sprite would be the best method. – Rory McCrossan Sep 07 '16 at 16:19
  • A GIF only has two states: playing or not playing. It is not possible to pause/reverse a GIF programatically. – APAD1 Sep 07 '16 at 16:24
  • Possible duplicate of [Stop a gif animation onload, on mouseover start the activation](http://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation) – APAD1 Sep 07 '16 at 16:25

2 Answers2

6

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>&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());
})

```

longnight
  • 162
  • 2
  • 11
  • “While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.” – Divyang Desai Jan 04 '17 at 17:03
0

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

sprites.js

TwistedOwl
  • 1,195
  • 1
  • 17
  • 30