Buttery Smooth “10fps” (2020)

Actually, 50 fps is not going to be &quot;buttery smooth&quot; as well, because with a framerate of 60 fps you cannot update display image 50 times per second, so some frames will be doubled.<p>I have another hypothesis on &quot;smoothness&quot; of animated images. Most of computer-generated animations are unnatural and not cinematic because the objects jump between frames instantly while in real life and on a camera film they move smoothly. The hypothesis is that if the animation was closer to real life, then it would look really smooth even with lower fps, for example, 24 fps or 30 fps.<p>For example, when moving a mouse cursor, it jumps between points every 16 ms instead of moving smoothly. You could argue that a human is unable to notice such tiny details, but here is a simple test to find out: take a mouse and move it in a circle, so that it makes 2-3 turns per second. If a real object would move with such speed, all you would see would be a blurred circle (you can take any real object and see for yourself), however with a mouse I can clearly see a circle made of about 10-15 mouse cursors. So the animation of mouse cursor is unrealistic, computer-like and it can be easily seen (I noticed this effect long time ago but initially thought that it is a problem with Linux or slow graphics card).<p>So to make a smooth animation you could use oversampling: generate an animation at say 6000 fps, and blend every 200 frames together (remember about non-linearity of RGB values when mixing colors). If by chance anyone has some free time and curiosity, could you test it?

<i>Any gif that claims to be showing 60fps is simply untrue due to the fact that no web browser out there right now supports displaying gifs higher than 50fps.</i><p>Only if you limit yourself to displaying the gif in an &lt;img &#x2F;&gt; tag. You can parse the frames yourself and render them with a &lt;canvas&gt; at a faster rate using browser&#x27;s requestAnimationFrame (which sync&#x27;s to the refresh rate of your display.)

&gt; I made this set of gifs of the same animation at different frame rates in ascending order(fps gets progressively higher). If any of them take a different amount of time to reach the start and end points(they are all exactly 1 second long) then you know what framerate your browser is “restricting” the frame delay at.<p>&quot;1 second long&quot; is pretty misleading, especially when telling people to look for different amounts of time to render. None of the gifs from 8-30fps are properly trying to be a second long.<p>If you have software that assigns the same delay to each frame, that&#x27;s a flaw you need to compensate for or switch to different software, and the author did neither.<p>Let&#x27;s use the 30fps gif as an example. It runs 11% too fast. Either it should be rendered with 33 frames, making it run 1% too fast, or it should use frame timings of 30ms 30ms 40ms 30ms 30ms 40ms making it exactly 1 second total.

As an aside, I’m very impressed by the comments widget that uses Github issues. I think I might adopt it for my blog. I never cared much for comment sections, but my blog is a Github repository anyways, so I might as well use it. Thanks!

GIF being used to represent repeating or just video files, while at the same time often times having much worse performance than using compressed video, is one of the worst decisions of the modern web. The only time I found GIF to be useful was before proper PNG transparency support.

<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=30405815" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=30405815</a> very similar content if you&#x27;re interested in another article on this.

Took me a while to figure out the 50 and 60 FPS ones.<p>They&#x27;re _supposed_ to be 1-second-long loops, but the 60 FPS one is rounded to 50 FPS on export, so it takes longer to play and desyncs.

There was a comment about wanting to improve browser support that was deleted, and I lost the reply I typed, so I&#x27;ll make a short version:<p>Gif can&#x27;t do smooth 60fps even if it could do 1-delay frames. They chose centiseconds for some reason I&#x27;ve never understood, when milliseconds would have worked fine and avoided this issue. If your file shouldn&#x27;t just be a video anyway, then the only fix is to use apng and demand sites support apng.

On my display, most of the demo-gifs look like they are insufficiently low-passed to render realistic&#x2F;smooth motion.<p>The 24&#x2F;25 fps gifs certainly have the opportunity to look great (movies are mostly at 24 fps), but the hard-edge rendering of the black circle makes &#x27;em look real choppy. I&#x27;d bet that rendering it at 50 fps, then averaging pairs of frames together and displaying it at 25 fps would yield something that seemed much smoother.<p>With some care, I bet one can go sub-25 fps on a gif and still have something that feels kinda &quot;smooth&quot;.

50 FPS is an unfortunate limit in a world mostly dominated by 60 hz displays.

Are there any use cases on the web, beside transparency, where you need an animated gif and you cannot use a video? Videos will always have better quality and compression.<p>I can think of one, which is avoiding Twitter video compression but that&#x27;s kind of a weird case.

&gt; Internet Explorer 10(Gecko)<p>The world would be a much better place if Internet Explorer had used Gecko :)

What does it mean for a browser to render a gif at 50Hz when almost all monitors have a 60Hz refresh rate?

So I thought humans aren&#x27;t supposed to be able to distinguish above ~30 fps. I&#x27;ve always been a little skeptical of that because faster framerates seem subjectively smoother to me, but I was willing to write that off to psychological bias or sync&#x2F;timing artifacts between interfaces or whatever.<p>Maybe someone out there can clear this up for me and convince me why we need 120+ fps displays?<p>EDIT: Well, nevermind, a quick google search corrected my misconception about 30fps.