Gutenberg: UI: Animate toolbars and block boundaries as they appear and disappear

[jasmussen]

The experience can be made nicer with non-intrusive (read: _fast_) animations. For example:

• Block level controls as well as the type switcher could animate out from "behind" the block in a .1s brief animation
• When you create a new block, the outlines should "pop out" in a satisfying elastic way

The idea is to make you feel productive as you type, same feeling as when you feel productive typing on a clicky keyboard.

[karmatosed]

I have mentioned this before, I'd love to see a tone and pace guide for all our animations come from this and other areas. I think seeing it as a story we're crafting and how we can use animations to enhance that, will be really powerful.

To that point, we can make sure interactions have similar pace for similar effects. We should be thinking how we want the user to feel on this journey. Where do we want their attention? Where do we want to speed them up? Where do we want them to take time?

This is something really a lot of applications don't do. We have the benefit of a totally new direction, enabling us to audit and tailor from the start. I'd love to see a proper animation tone and interaction library from this.

[hugobaeta]

Love the desire to put some motion in this, but Id consider it more of a UX enhancement than "flourish", since great intentional motion/animation should enhance the user experience.

To that note, Dropbox Paper is a phenomenal example of use of motion in a very similar UI patterns to what we're exploring here (worth looking at for more inspiration). Notice how the + rotates to the right anticipating the roll out of the menu for block-level items. Lovely!

Similarly, the kind of bounce used in the inline-element styling tooltip adds delight and brings attention to that piece of UI:

[jasmussen]

Thanks @hugobaeta, completely agree. "Flourish" was a bad term to use.

I dabbled with an animatic to do something similar to Dropbox Paper, here: https://github.com/WordPress/gutenberg/issues/90#issuecomment-281036218

By adding the upwards animation and opacity change, so long as it's fast enough, can help "anchor" the UI, and implicity explain where it's coming from, as well as context.

Incidentally that's what I take it Tammie is referring to, when establishing an animation style guide. Writing all these things down, defining layers and materials and speeds and rules for the animations, so that whenever we need to create a new animation, we know:

• how fast it's supposed to be
• what material it is made of (does it bounce?)
• where does it come from?
• what does it cover, what covers it?

All that stuff. I would ❤️ it if you would be part of such an effort :)

[jasmussen]

Renamed this ticket and assigned myself.

[jasmussen]

Closing this as fixed by Riad! 🎉