4 ms·

How does that diagram even work on that link? https://git-lfs.github.com/ https://git-lfs.github.com/ It's a gif, but it becomes a static afterwards. I see no

How does that diagram even work on that link? https://git-lfs.github.com/ https://git-lfs.github.com/ It's a gif, but it becomes a static afterwards. I see no changes on the frontend whatsoever, no CSS property changes, no changes in image, etc. No canvas element etc. Refreshing the page, the gif stays static, but running it through a different browser replays gif animation. I've never seen this done before, how does that work?

jgautsch 8y ago
I haven’t inspected it myself (I’m on mobile atm) but usually that kind of thing is an animated SVG. You can animate SVG nodes with CSS just like HTML
- Kagerjay 8y ago
  True, but its just a gif file on the page. I can't seem to figure out how it stops the gif animation though. I've looked into this topic before, normally you apply a canvas element on top of it capturing one frame of the image. Or you can hotswap the image / gif at end of animation. But there's none here though, neither SVG or canvas. It stops at the end of its animation here as well too, https://git-lfs.github.com/images/graphic.gif https://git-lfs.github.com/images/graphic.gif I didn't see the answer on stackoverflow. https://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation https://stackoverflow.com/questions/5818003/stop-a-gif-anima...
  - webmaven 8y ago
    Animated GIFs loop a specified number of times. The browser simply isn't re-running animations that have finished when the page reloads. If you want to see it animate again, do shift-ctrl-r or shift-reload.
Hopka 8y ago
It is a feature of the GIF format. You can specify how often the animation shall loop or that it should loop forever.
- Kagerjay 8y ago
  ah I didn't know GIFs could do that. I found a tool online for changing number of loops, set the value to 1 https://ezgif.com/loop-count https://ezgif.com/loop-count

jgautsch 8y ago

I haven’t inspected it myself (I’m on mobile atm) but usually that kind of thing is an animated SVG. You can animate SVG nodes with CSS just like HTML

Kagerjay 8y ago
True, but its just a gif file on the page. I can't seem to figure out how it stops the gif animation though. I've looked into this topic before, normally you apply a canvas element on top of it capturing one frame of the image. Or you can hotswap the image / gif at end of animation. But there's none here though, neither SVG or canvas. It stops at the end of its animation here as well too, https://git-lfs.github.com/images/graphic.gif https://git-lfs.github.com/images/graphic.gif I didn't see the answer on stackoverflow. https://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation https://stackoverflow.com/questions/5818003/stop-a-gif-anima...
- webmaven 8y ago
  Animated GIFs loop a specified number of times. The browser simply isn't re-running animations that have finished when the page reloads. If you want to see it animate again, do shift-ctrl-r or shift-reload.

Hopka 8y ago

It is a feature of the GIF format. You can specify how often the animation shall loop or that it should loop forever.

Kagerjay 8y ago
ah I didn't know GIFs could do that. I found a tool online for changing number of loops, set the value to 1 https://ezgif.com/loop-count https://ezgif.com/loop-count