Search code examples
javascripthtmlgifanimated-gif

Is there anyway to show an animated gif on a webpage not starting from the beginning?

I have an animated gif and i want to show it on a webpage but show it starting in the middle of the animation (not from the beginning. is this possible?

Solution

  • It wouldn't be possible in a reliable way I'd imagine. Waiting any amount of time would be dependent on the GIF being rendered consistently and on time.

    For more flexibility, make the GIF a spritesheet and cycle through offsets with JavaScript. Then you could start it whenever you like. Something like this...

    var imgContainer = document.getElementById("image");
var offset = 0;
setInterval(function() { 
    imgContainer.style.backgroundPosition = (offset % 1000) + "px 0";
    offset += 300; 
}, 1e3);