dunno! I'd expect z-index changes to be most of the cost of DOM re-ordering, but would want to test.
-
-
Replying to @slightlylate @gavindoughtie and
The really critical thing for smoothness is to make sure you're working with layers and keeping them on the GPU.
2 replies 0 retweets 4 likes -
Replying to @slightlylate @gavindoughtie and
I see WAAAAAAYYYYY too many folks doing main-thread animations like it's 1999.
1 reply 0 retweets 10 likes -
Replying to @slightlylate @gavindoughtie and
So "raw" CSS animations or Web Animations (easier from script) are where you want to be at.
1 reply 0 retweets 2 likes -
-
Replying to @slightlylate @gavindoughtie and
Motion paths + Element.animate() will get you 90% of the visual transitions in that gif.
1 reply 0 retweets 1 like -
Replying to @slightlylate @gavindoughtie and
Tricky part in all of these is the "snap in"; at the end of the animation, need to move element to the correct location in DOM order.
1 reply 0 retweets 0 likes -
Replying to @slightlylate @gavindoughtie and
Paul's FLIP approach ensures there's space. Recommended.
1 reply 0 retweets 1 like -
Replying to @slightlylate @gavindoughtie and
Caveat emptor: Safari is suuuuuuuuuuper far behind. Doesn't support Element.animate(). Luckily, there's a polyfill: https://github.com/web-animations/web-animations-js …
3 replies 1 retweet 14 likes -
Replying to @slightlylate @gavindoughtie and
does it actually look good on Safari though? seems like you're basically reduced to doing those animations on the main thread again
1 reply 0 retweets 0 likes
It uses rAF. Not great, but generally running on faster HW. Try it for yourself!
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.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.