Consider fine-tuning the hover/select animation for blocks

[kjellr]

Related to #8029.

When building in the updated block borders in #14145, there was some discussion around trying our alternative animations (I can't find it in the thread, but I remember it happening somewhere! 😬)

I'm opening this ticket to track some ideas. Please remember: it's quite possible we will not decide to pursue any of these. For a common action like hovering/selecting a block, we want to be the animation to be as natural (and probably as minimal) as possible. It's also worth keeping in mind that if #14961 lands, it'll likely bring some animation too, so we don't want to overdo it.

It's also worth noting that anything we build in here should adhere to our animation guidelines, and will be off automatically for users with the "prefers reduced motion" preference set in their OS.

Some early explorations:

NOTE: All these GIFs have been slowed down to catch the quick effects. Click through to the demos to check out real-time animations.

---

Expand from left

Demo: https://codepen.io/kjellr/full/BEGBoO

---

Growing Selection Border

Demo: https://codepen.io/kjellr/full/BEqgvQ

---

Growing Hover Border

Demo: https://codepen.io/kjellr/full/eoPavJ

[davewhitley]

Expand from left

This is lovely, although I didn't like it until I tried it in Safari. In Chrome, The left border expands unnaturally — let me know if you can reproduce.

The animation is subtle, and I love how the border disappears when you unfocus. That's my favorite part about it. It'll be interesting to see how the slide from left animation works with a block toolbar that is much longer.

Growing Selection Border

My least favorite because the animations seem very long and distracting. Hard to keep track of the toolbar with my eyes.

Growing Hover Border

This is probably my favorite. The animation is nice and subtle. The only thing I don't like is how the toolbar seems to "blink" when you start clicking on blocks at a quick pace (as a result of the opacity change). The expand from left demo didn't have this problem. On the other hand, the left border on the expand from left demo seems more "blinky" than this one, and the one here is much more soothing to me.

You might consider not animating the toolbar at all since that is a high-use piece of UI.

[kjellr]

This is lovely, although I didn't like it until I tried it in Safari. In Chrome, The left border expands unnaturally — let me know if you can reproduce.

Good catch! I missed that somehow. The animation was mistakenly adding a left border before it animated everything. 😄 Should be fixed now.

Growing Hover Border

This is probably my favorite. The animation is nice and subtle. The only thing I don't like is how the toolbar seems to "blink" when you start clicking on blocks at a quick pace (as a result of the opacity change). The expand from left demo didn't have this problem. On the other hand, the left border on the expand from left demo seems more "blinky" than this one, and the one here is much more soothing to me.

Here's a slightly different version — I've slowed down the animation just a bit and added a longer fade-in for the left border. In this case, users may actually end up clicking before the animation is complete, but if they do it still looks fine, so I don't think it's a problem. Let me know what you think:

https://codepen.io/kjellr/full/ROEWym

You might consider not animating the toolbar at all since that is a high-use piece of UI.

Yeah, definitely. A super-quick fade may be fine, but I'm a little nervous about doing a scale animation there (like on the first and second animations). They may end up being too distracting.

[mapk]

Nice concepts of animation! I tend to agree with @drw158 that Growing from Hover is the one I like most. Initially, I felt when hovering rapidly through several blocks, the animation was a lot, but now it's really not that much in relation to the default hover appearance.

[mapk]

With G2 UI design work on the way (#18667), I think we can close this one.