Bouncing DVD Logo

iamwpj wrote: post #3

_bxg1 wrote: post #2

Makes me think of this https://www.youtube.com/watch?v=QOtuX0jL85Y

I watched the site for a bit just to see if it would hit the corner.

Some shameless plugs, My take on the matter - http://tholman.com/special-screen-savers/1/ ... and a 5ish minute segment at a conference talk, explaining the math of corner hitting, and my solutions https://youtu.be/iGPzwotXgfk?t=415

Re: Bouncing DVD Logo

#8

Post by kamikaz1k » Wed, Apr 15, 2020, 8:43 PM UTC

pier25 wrote: post #5

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/

It's a pretty simple page, setTimeout should work well enough. Is the interval too high?

Re: Bouncing DVD Logo

#9

Post by nikital » Wed, Apr 15, 2020, 8:44 PM UTC

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)

Re: Bouncing DVD Logo

#10

Post by aphextron » Wed, Apr 15, 2020, 8:47 PM UTC

pier25 wrote: post #5

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.