1

I'm using webp as I need support for transparency in a video/gif format. My issue is I need the element to disappear once the animation has finished, and I'm not sure how exactly I can figure out when that has happened without hard coding it (which could lead to inconsistencies on slower hardware).

Before I was looping through a PNG sequence but the performance wasn't great, so I'd rather use this format if possible.

I'm using JavaScript and I currently just have it in an tag as such:

<img src="../../../assets/animations/anim.webp">
Chad Plourde
  • 73
  • 5

1 Answers1

1

Currently this is not possible. Likely the best you can do is add a listener to the images load event and set a timer to the same length of the GIF animation. (Similar to this answer)

<img onload="stopImage();" id="myImg" src="../../../assets/animations/anim.webp">

And in JS:

function stopImage()  {  
  setTimeout(
    () => document.getElementById('myImg').src = "../../../assets/staticImage.png"
    , 6700);   
}

Network load times do vary a lot, but the variance in play speed shouldn't be drastically different for short duration animations. If you need a fine level of control then you should control the animation manually with JS. Either as you were doing before with the PNG sequence, or as recommended in this answer with CSS sprite maps.

TheWandererLee
  • 1,012
  • 5
  • 14