3 ms·

It's janky because it was made 6 years ago and it uses CSS Floats (which are famously janky). Here's a similar codepen I made two years ago: https://codepen.io

It's janky because it was made 6 years ago and it uses CSS Floats (which are famously janky). Here's a similar codepen I made two years ago: https://codepen.io/spartanatreyu/pen/OJVVQRw https://codepen.io/spartanatreyu/pen/OJVVQRw It doesn't use floats, so it ends up being silky smooth. It could be simplified with today's scss/css, but it's still a decent demonstration of how smooth animations should be.

ozten 4y ago
Awesome work! +1 this looks silky smooth.
lelandfe 4y ago
The world of high performance CSS animation has not changed much in 6 years (or more![0]) Your demo is doing the same thing as the original – transitioning a `translateX` value. Indeed, I get a smooth, consistent 60fps from both, and a performance profile reveals that no paints occurred in the original! That's AKA "there is no way to improve this" So, I'm pretty sure float won't have any impact to performance, as the elements themselves don't reflow during the transition. [0] https://web.archive.org/web/20131109172325/https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://web.archive.org/web/20131109172325/https://www.html5...
- spartanatreyu 4y ago
  The original is doing `translateX` yes, but it also has float in it. I can see the jank on my machine, and commenting out the float statements makes the jank disappear. Even though the elements aren't reflowing, there is something going on in the browser that is making it slow down. Strangely enough, recording the browser performance seems to "fix" the jank so long as the browser is recording. Perhaps capturing screenshots of the page every frame is forcing the browser to deliver frame updates at the correct time.
  - lelandfe 4y ago
    Here's a dead simple example, do you experience jank with it? https://jsfiddle.net/6etnpzyx/1/ https://jsfiddle.net/6etnpzyx/1/ Transform values (and opacity values, like your Codepen use) operate at the compositor level, and don't need to paint. That means that an element using those values with a float layout won't impact FPS – the transition is unaware that the element is floated. > recording the browser performance seems to "fix" the jank If Chrome is also exhibiting it, it has a passive FPS meter to record this. DevTools, Ctrl/Cmd-Shift-P, "FPS". I get a pretty steady 60FPS: https://imgur.com/a/lgntlpw https://imgur.com/a/lgntlpw
    - spartanatreyu 4y ago
      I see jank on that example with both Firefox and Edge on a 2020 iMac running macOS Monterey. As soon as I take out the float and rerun the examples they run butter smooth. Turning on the fps overlay on Edge (it's the same one as chrome) shows stutters (but for some reason I need to make sure I'm moving the mouse smoothly for the fps counter to update, guessing it has something to do with the preview sitting inside an iframe).

ozten 4y ago

Awesome work! +1 this looks silky smooth.

lelandfe 4y ago

The world of high performance CSS animation has not changed much in 6 years (or more![0]) Your demo is doing the same thing as the original – transitioning a `translateX` value. Indeed, I get a smooth, consistent 60fps from both, and a performance profile reveals that no paints occurred in the original! That's AKA "there is no way to improve this" So, I'm pretty sure float won't have any impact to performance, as the elements themselves don't reflow during the transition. [0] https://web.archive.org/web/20131109172325/https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://web.archive.org/web/20131109172325/https://www.html5...

spartanatreyu 4y ago
The original is doing `translateX` yes, but it also has float in it. I can see the jank on my machine, and commenting out the float statements makes the jank disappear. Even though the elements aren't reflowing, there is something going on in the browser that is making it slow down. Strangely enough, recording the browser performance seems to "fix" the jank so long as the browser is recording. Perhaps capturing screenshots of the page every frame is forcing the browser to deliver frame updates at the correct time.
- lelandfe 4y ago
  Here's a dead simple example, do you experience jank with it? https://jsfiddle.net/6etnpzyx/1/ https://jsfiddle.net/6etnpzyx/1/ Transform values (and opacity values, like your Codepen use) operate at the compositor level, and don't need to paint. That means that an element using those values with a float layout won't impact FPS – the transition is unaware that the element is floated. > recording the browser performance seems to "fix" the jank If Chrome is also exhibiting it, it has a passive FPS meter to record this. DevTools, Ctrl/Cmd-Shift-P, "FPS". I get a pretty steady 60FPS: https://imgur.com/a/lgntlpw https://imgur.com/a/lgntlpw
  - spartanatreyu 4y ago
    I see jank on that example with both Firefox and Edge on a 2020 iMac running macOS Monterey. As soon as I take out the float and rerun the examples they run butter smooth. Turning on the fps overlay on Edge (it's the same one as chrome) shows stutters (but for some reason I need to make sure I'm moving the mouse smoothly for the fps counter to update, guessing it has something to do with the preview sitting inside an iframe).