There are (thankfully) very few layers in this layout; most of it is straightforward with Web Animations.
-
-
Replying to @slightlylate @gavindoughtie and
Big up-front issue will be making sure all the z-order stuff is sorted out. There are few swap over/under effects.
2 replies 0 retweets 3 likes -
Is it better to reorder the DOM or use z-index?
2 replies 0 retweets 0 likes -
dunno! I'd expect z-index changes to be most of the cost of DOM re-ordering, but would want to test.
1 reply 0 retweets 1 like -
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
Paul's FLIP approach ensures there's space. Recommended.
-
-
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 - 2 more replies
New conversation -
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.