71–80 of 293 posts
Earlier quoted context omitted.
It's just a less-than-ideal implementation, your CPU is most definitely not suffering. Here is a completely smooth version: https://codesandbox.io/s/nostalgic-cherry-wwpzj?file=/src/in... (I made the exact same thing last year as a joke for our team monitors)
I am sorry to say, but my MacBook Pro 2014 i7 is stuttering in Safari 11.1 on a 4k external screen.
Earlier quoted context omitted.
Try https://gif.com.ai to turn it into a gif. You can set timing with a bouncing tag to make it move from end to end. I’m not aware of any tools to turn gifs into screensavers however. I’m pretty sure they exist though. I made one a little while ago https://imgur.com/7t9svTV
That's got to be one of the least efficient suggestion I've read in a long time. GIFs are horrible, except they are awesome. In a 90s sense of awesome. It would be much more efficient to turn it into a proper video.
In 1999, my DVD player could do this smoothly without any hitches or glitches. In 2020, my Xeon can't render this fast enough to avoid stutters. Either code quality has gone way down or my DVD player had a faster CPU.
It's just a less-than-ideal implementation, your CPU is most definitely not suffering. Here is a completely smooth version: https://codesandbox.io/s/nostalgic-cherry-wwpzj?file=/src/in... (I made the exact same thing last year as a joke for our team monitors)
No wonder modern frontend is such a mess.
As a historical note, the bouncing logo wasn't just for fun, but was important to prevent screen burn-in on CRTs. If you had a static image on a CRT for a long time, it could damage the phosphor. Sometimes you could even see the image when the screen was off! This was the original purpose of screensavers, which saved your screen from damage. Displaying a dynamic image prevented one part of the screen from being overu…
As a historical note, the bouncing logo wasn't just for fun, but was important to prevent screen burn-in on CRTs. If you had a static image on a CRT for a long time, it could damage the phosphor. Sometimes you could even see the image when the screen was off! This was the original purpose of screensavers, which saved your screen from damage. Displaying a dynamic image prevented one part of the screen from being overu…
In 1999, my DVD player could do this smoothly without any hitches or glitches. In 2020, my Xeon can't render this fast enough to avoid stutters. Either code quality has gone way down or my DVD player had a faster CPU.
This probably wasn't the case with DVD players (because the effort wouldn't have been worth it for a mass market consumer product) but 1980s Amiga home computers for example in some regard still outperformed mid-1990s PCs, which nominally were several orders of magnitude faster.
They were able to pull this off by clever hardware tricks and due to custom chips that were highly optimised for very specific use cases.
Run-of-the-mill PCs on the other hand were standardised and designed to perform good on average in most situations, not just very specific ones.
A while ago I made a bouncing DVD logo that would actually hit the corner every few bounces with high probability: https://nikital.github.io/screensaver (But then it would troll you just before hitting it)
Earlier quoted context omitted.
>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.
That is not correct. setInterval is definitely the main issue here, especially with a 30ms delay, 33 or 16 would at least give it a chance to sync with refresh rates. Absolutely positioned elements do not trigger reflow, as the element is removed from the normal document flow [1]. See my example in another comment. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/position#ab...
[0] https://css-tricks.com/tale-of-animation-performance/
[1] https://www.paulirish.com/2012/why-moving-elements-with-tran...
As a historical note, the bouncing logo wasn't just for fun, but was important to prevent screen burn-in on CRTs. If you had a static image on a CRT for a long time, it could damage the phosphor. Sometimes you could even see the image when the screen was off! This was the original purpose of screensavers, which saved your screen from damage. Displaying a dynamic image prevented one part of the screen from being overu…
That you feel the need to inform us of this "historical fact" makes me feel especially old... having lived through the CRT -> LCD transition period when buying an LCD made going to LAN parties a lot easier