4 ms·

My head is sort of reeling from this. If height animations are that expensive today, imagine how expensive (and still commonplace) they were twenty years ago.

My head is sort of reeling from this. If height animations are that expensive today, imagine how expensive (and still commonplace) they were twenty years ago. I fortunately quit animating height quite a long time ago in favor of similar transform techniques, but… wow, still crazy to learn the magnitude of this common operation.

moritzwarhier 1y ago
It's really simple. Don't animate layout, especially if your DOM is huge. If your element floats absolutely positioned outside the layout flow, animating height would not be a problem. And if the browser facilities for animating height/max-height, especially to/from auto, get better, it surely will become more common. Right now, I wouldn't call it common. It's a common requirement, but only until you start to consider layout. Fwiw, animating margin and padding is possible and has the capability to cause the same amount of jank as animating height.
- Eric_WVGG 1y ago
  You can animate an absolute positioned div without it obviously altering what a normal person would call "the layout." That's not simple unless one is willing to dig very deeply into the how web browser rendering works. And really still not simple. Otherwise this article wouldn't have been written.
hbn 1y ago
The heart of the issue isn't that animating height is expensive, it's the downstream effect of that animation repeatedly changing the page's layout and forcing redraws.
cvoss 1y ago
But it wasn't expensive twenty years ago. Twenty years ago people actually knew how to efficiently use their limited computational resources.
- Eric_WVGG 1y ago
  so it wasn't expensive because people didn't do it? They did.
perilunar 1y ago
I actually did quite a bit of browser animation 20+ years ago. The trick was (as mentioned elsewhere on this page) to only animate absolutely positioned elements. Even back in the version 4 browsers you could animate hundreds of divs at 20+ fps on a decent computer (with JS of course — CSS animation didn't exist yet).

moritzwarhier 1y ago

It's really simple. Don't animate layout, especially if your DOM is huge. If your element floats absolutely positioned outside the layout flow, animating height would not be a problem. And if the browser facilities for animating height/max-height, especially to/from auto, get better, it surely will become more common. Right now, I wouldn't call it common. It's a common requirement, but only until you start to consider layout. Fwiw, animating margin and padding is possible and has the capability to cause the same amount of jank as animating height.

Eric_WVGG 1y ago
You can animate an absolute positioned div without it obviously altering what a normal person would call "the layout." That's not simple unless one is willing to dig very deeply into the how web browser rendering works. And really still not simple. Otherwise this article wouldn't have been written.

hbn 1y ago

The heart of the issue isn't that animating height is expensive, it's the downstream effect of that animation repeatedly changing the page's layout and forcing redraws.

cvoss 1y ago

But it wasn't expensive twenty years ago. Twenty years ago people actually knew how to efficiently use their limited computational resources.

Eric_WVGG 1y ago
so it wasn't expensive because people didn't do it? They did.

perilunar 1y ago

I actually did quite a bit of browser animation 20+ years ago. The trick was (as mentioned elsewhere on this page) to only animate absolutely positioned elements. Even back in the version 4 browsers you could animate hundreds of divs at 20+ fps on a decent computer (with JS of course — CSS animation didn't exist yet).