4 ms·

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-

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/index.js 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)

odensc 7y ago
I have a 60fps + 144fps monitor setup and when I move it to my high refresh rate one, it goes hyperspeed :) You should calculate delta time with performance.now() and change position based off of that.
- ricardobeat 7y ago
  Haha, indeed. A correct implementation would calculate (pixel) movement speed based on a delta from last frame, left that out to simplify the code. EDIT: I added a simple rate-limiting function :)
  - jrockway 7y ago
    I tried it on my 120Hz monitor, looks great.
xenonite 7y ago
I am sorry to say, but my MacBook Pro 2014 i7 is stuttering in Safari 11.1 on a 4k external screen.
- californical 7y ago
  It lags pretty bad on my Pixel phone too..
  - ricardobeat 7y ago
    Only tested on an iPhone, works fine at 60fps. You can open the standalone page at https://wwpzj.csb.app/ https://wwpzj.csb.app/ to avoid the whole codesandbox app running at the same time.
    - SergeAx 7y ago
      I am grateful for your effort and have no intention to troll or diminish you - in case it looks like that. But still: now in desktop Chrome logo bounces from the very bottom or right edges of window, which is great, but there are gaps at the left and top edges, so logo never reaches those two edges. I beleieve you are quite competent in this, so for me it's just another illustration of how HTML/DOM ecosystem is broken in so many ways that it takes enormous effort to perform such a trivial task. Thank you and plase stop wasting your time on this)
      - ricardobeat 7y ago
        There are probably a dozen edge cases (!) that are not covered, though I bet most of them would be the same if using SDL or any other graphics engine. This was mostly a sample of canonical requestAnimationFrame use, in contrast to the original, and not an attempt to re-create the whole thing. > Thank you and please stop wasting your time on this Haha. Thanks. I like these mini-challenges, helps me relax for a few minutes :)
SergeAx 7y ago
On my Chrome there are flashing scrollbars when logo hits right or bottom boundary. No wonder modern frontend is such a mess.
- deleted 7y ago
  [deleted]
jsf01 7y ago
This is definitely not smooth on iOS, on a brand new iPhone that’s arguably way faster than whatever system played the original DVD screensaver. On a technical note, not that there’s much you can do about this, but because you’re reading clientWidth and clientHeight each frame, you’re forcing reflow. A performant implementation would probably require avoiding the DOM altogether within the draw loop, so that would mean using canvas/webgl.
- dade_ 7y ago
  Looks great on my new iPad Pro, so I guess it was worth the money!
- ricardobeat 7y ago
  There are no elements in the page for style to be recalculated, so I doubt the reflow is what's slowing it down. I'm curious on what could cause bad performance for you though. It runs smoothly at 60fps on an iPhone 11 and the iPad, using Safari. Did you open the standalone page at https://wwpzj.csb.app/ https://wwpzj.csb.app/? My only guess would be that the CodeSandbox UI is too heavy for mobile. For science, I went ahead and converted the code to ES3 and ran on the 10-year old first generation iPad (with setInterval) and it's still pretty smooth.
  - dawnerd 7y ago
    Not smooth here either. Can tell it wants to but will hiccup every now and then.
    - deleted 7y ago
      [deleted]
akx 7y ago
Yeah, it's not perfectly smooth for me (MBP 2019, Chrome). I think adding `will-change: transform` might help a bit, to hint the user agent that you'll be animating transforms...
magicalhippo 7y ago
Firefox 74 on Windows 10, mostly smooth but stutters noticeably every few seconds.

odensc 7y ago

I have a 60fps + 144fps monitor setup and when I move it to my high refresh rate one, it goes hyperspeed :) You should calculate delta time with performance.now() and change position based off of that.

ricardobeat 7y ago
Haha, indeed. A correct implementation would calculate (pixel) movement speed based on a delta from last frame, left that out to simplify the code. EDIT: I added a simple rate-limiting function :)
- jrockway 7y ago
  I tried it on my 120Hz monitor, looks great.

xenonite 7y ago

I am sorry to say, but my MacBook Pro 2014 i7 is stuttering in Safari 11.1 on a 4k external screen.

californical 7y ago
It lags pretty bad on my Pixel phone too..
- ricardobeat 7y ago
  Only tested on an iPhone, works fine at 60fps. You can open the standalone page at https://wwpzj.csb.app/ https://wwpzj.csb.app/ to avoid the whole codesandbox app running at the same time.
  - SergeAx 7y ago
    I am grateful for your effort and have no intention to troll or diminish you - in case it looks like that. But still: now in desktop Chrome logo bounces from the very bottom or right edges of window, which is great, but there are gaps at the left and top edges, so logo never reaches those two edges. I beleieve you are quite competent in this, so for me it's just another illustration of how HTML/DOM ecosystem is broken in so many ways that it takes enormous effort to perform such a trivial task. Thank you and plase stop wasting your time on this)
    - ricardobeat 7y ago
      There are probably a dozen edge cases (!) that are not covered, though I bet most of them would be the same if using SDL or any other graphics engine. This was mostly a sample of canonical requestAnimationFrame use, in contrast to the original, and not an attempt to re-create the whole thing. > Thank you and please stop wasting your time on this Haha. Thanks. I like these mini-challenges, helps me relax for a few minutes :)

SergeAx 7y ago

On my Chrome there are flashing scrollbars when logo hits right or bottom boundary. No wonder modern frontend is such a mess.

deleted 7y ago
[deleted]

jsf01 7y ago

This is definitely not smooth on iOS, on a brand new iPhone that’s arguably way faster than whatever system played the original DVD screensaver. On a technical note, not that there’s much you can do about this, but because you’re reading clientWidth and clientHeight each frame, you’re forcing reflow. A performant implementation would probably require avoiding the DOM altogether within the draw loop, so that would mean using canvas/webgl.

dade_ 7y ago
Looks great on my new iPad Pro, so I guess it was worth the money!
ricardobeat 7y ago
There are no elements in the page for style to be recalculated, so I doubt the reflow is what's slowing it down. I'm curious on what could cause bad performance for you though. It runs smoothly at 60fps on an iPhone 11 and the iPad, using Safari. Did you open the standalone page at https://wwpzj.csb.app/ https://wwpzj.csb.app/? My only guess would be that the CodeSandbox UI is too heavy for mobile. For science, I went ahead and converted the code to ES3 and ran on the 10-year old first generation iPad (with setInterval) and it's still pretty smooth.
- dawnerd 7y ago
  Not smooth here either. Can tell it wants to but will hiccup every now and then.
  - deleted 7y ago
    [deleted]

akx 7y ago

Yeah, it's not perfectly smooth for me (MBP 2019, Chrome). I think adding `will-change: transform` might help a bit, to hint the user agent that you'll be animating transforms...

magicalhippo 7y ago

Firefox 74 on Windows 10, mostly smooth but stutters noticeably every few seconds.