Said Achmiz comments on Announcing turntrout.com, my new digital home

[Said Achmiz]

I can’t play/​pause the GIF on hover because GIFs don’t allow that (AFAIK).

1. Make a static version of the image (the first frame of the animation, perhaps?). Set that image to load by default.

2. At the end of page load, in the background, load the animated version.

3. On hover (by adding a listener to the mouseenter event), rewrite the src attribute of the image element to point to the animated image.

4. On un-hover (mouseleave event), rewrite the src back to the static one.

I don’t really mind the zeros. If I hear from more people that the slashed zeros bother them, I’ll reconsider.

Slashed zeroes are Correct™.

[TurnTrout]

I was hoping to have the hover-mode animation seamlessly pause and unpause—your proposal would have the displayed image revert back to the first frame on mouseleave IIUC.

[Said Achmiz]

your proposal would have the displayed image revert back to the first frame on mouseleave IIUC

Yes, correct.

I was hoping to have the hover-mode animation seamlessly pause and unpause

This SO question has several answers, all of which seem like reasonable solutions to me (if I were doing this, I’d try them all and pick the most performant one, most likely).