How to Extract Each Frame of a GIF File Using Javascript

Question

My Problem:

Hey everyone. I'm trying to code an animated gif (88 frames long) that has its animation controlled by a range input, that way when the user slides the slider it progresses through the animation.

This means that I need a way of extracting each frame of the gif so that I can assign each frame to a value on the range's slider, however, I can't seem to find a straightforward and/or effective way to achieve this.

What I've Tried:

At first I tried using a TIFF sequence, that way all of the frames are already extracted. However, it seems like a waste to upload 88 different files and then have to reference them individually, so that rules out that option.

I am aware of libgif.js, but I read somewhere that it's not reliable (please correct me if I am wrong). I also just can't figure out how to get it to work, as the syntax for it is pretty confusing and there's little to no description of how to implement it.

I also considered using sprite sheets, but the gif is too long and too high resolution to even attempt to fit it all on one sheet.

Is anyone able to point me in the right direction? I would really appreciate it.

My Code:

The code here really isn't applicable since its functionality revolves around this question, but the goal is for the slider to move the gif animation to each frame according to the value of the slider.

if(document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  
  var slider = document.getElementsByClassName("slider")[0];
  var number = document.getElementById("slider-value");

  slider.oninput=function(){
    number.innerHTML = slider.value;
  }

}

.gif {
  width: 200px;
}

How to Extract Each Frame of a GIF File Using Javascript

My Problem:

What I've Tried:

My Code:

0 Answers