Besides, the interior layout doesn’t change, so it won’t be recomputed. Layout work is trivial.
-
-
Replying to @pcwalton
Yeah, if you restrict yourself to the simple design in the post, but in reality developers use more complex designs
1 reply 0 retweets 0 likes -
Replying to @jaffathecake
If the problem is “don’t lay out the interior during an animation”, then devs should directly request that. Not drop into linear algebra.
1 reply 0 retweets 0 likes -
Replying to @pcwalton @jaffathecake
For example, it should be sufficient to set a fixed width for the content to prevent relayout of the inside during animation.
1 reply 0 retweets 0 likes -
Replying to @pcwalton
That's replacing one trick with another. Clip-path is the sensible choice if you want to change the rendered portion without changing layout
1 reply 0 retweets 0 likes -
Replying to @jaffathecake
I think if you were to ask average Web developers (not perf geeks) how to write such a thing, they’d reach for width before clip path.
2 replies 0 retweets 0 likes -
Replying to @pcwalton @jaffathecake
It’s certainly what I’d do: inner div with fixed width, then animate an outer div’s width/height with overflow:hidden set.
1 reply 0 retweets 1 like -
Replying to @pcwalton
The use of the fixed inner div is kinda perf-geeky
2 replies 0 retweets 0 likes -
Replying to @jaffathecake
Well, it’s needed for the animation to look right. Otherwise with certain layouts you’d see the contents jump around.
2 replies 0 retweets 0 likes -
Replying to @pcwalton
Yep, I see those jumps a lot. Especially when the outer element has padding.
1 reply 0 retweets 0 likes
There are limits, but we can improve a lot. e.g. Googling for “jquery slide out menu” brings up https://codepen.io/ianfarb/pen/leBzD … — could be made fast
-
-
Replying to @pcwalton
I welcome it! But a fast clip-path will enable even more animations
0 replies 0 retweets 1 likeThanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.