Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

How does that diagram even work on that link?

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?



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


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


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


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

I didn't see the answer on stackoverflow. https://stackoverflow.com/questions/5818003/stop-a-gif-anima...


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: