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

what i'm trying achieve interactive animated logo. default it's on frame 1. when hovered, plays forward , stops @ last frame. on mouseleave plays last frame first (backwards) , stops @ first frame. if mouseleave during forward animation -> current frame , play backwards.

i tried using canvas , sprites it's challenging. in fact don't understand it. tried this plugin, it's possibilities limited.

so wondering if can using gif? maybe current animation frame , play gif backwards frame?

yes, can control gif js lib, this: https://github.com/buzzfeed/libgif-js

html:

```

    <div id="controller-bar">       <button id="backward" href="#">|< step </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()); }) 

```