41–50 of 293 posts
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)
I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... Jesus it's 2020 at least use requestAnimationFrame! https://flaviocopes.com/requestanimationframe/
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.
As someone who's new to front end and css is there a good resource on what properties are more costly, or which functions are newer and meant to be more performant like translate3d is mentioned as being gpu accelerated? I've seen mentions of reflow, repaint, and layout thrashing but not a comprehensive list of what functions are meant to replace what other ones, or relative cost of each function in common use cases.…
It’s just another property which can sometimes be used to do what you could earlier only do with ‘position:’, but there are still many cases (the majority) you position things using the “old” position property.
They have different uses, and for that reason one also requires a reflow while the other does not.
I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... Jesus it's 2020 at least use requestAnimationFrame! https://flaviocopes.com/requestanimationframe/
I wrote my own version - seems to run smoother https://speets.ca/dvd/
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.
This looks like it’s just 2D so translate() would be enough, almost all of the functions under transform are GPU accelerated.
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.
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.
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 was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... Jesus it's 2020 at least use requestAnimationFrame! https://flaviocopes.com/requestanimationframe/
>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.
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...
I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... Jesus it's 2020 at least use requestAnimationFrame! https://flaviocopes.com/requestanimationframe/
I wrote my own version - seems to run smoother https://speets.ca/dvd/