Global Styles variations: Refining hover animation

[critterverse]

This issue is related to the work being done in #39322 to introduce a hover frame containing extra information about individual style variations. I'm sharing a revised version of an animation idea that was originally shared in #39322 (comment).

The goal of this animation approach is to try to show the maximum amount of color possible by having swatches from the theme palette take over the entire thumbnail preview:

The information shown in the hover frame has been reduced to only include the variation title as Heading text. This element animates in from right to left, while also fading in. The line of color swatches is revealed by a simple wipe from right to left:

Thanks @jasmussen for collaborating on this idea!

[jasmussen]

As with all animation in the interface, it is automatically disabled if the "reduce motion" accessibility setting is enabled in your operating system or browser.

[paaljoachim]

I find the animation confusing not knowing why it is animated. The colors flash by too quickly so that I do not get any use of seeing these.

"The line of color swatches is revealed by a simple wipe from right to left:"
It would be better to skip the animation and go straight to seeing the end result, or atleast having a much more subtile touch to it. It would be nice to focus on having a UI that gives subtile hints. The animation does not help. The end result one can study the colors in use. It is hard to do so when it is animated.

@karmatosed Tammie I believe you also would like to check out this issue.

Check out this comment I made to the PR made by @jasmussen Joen.
#38783 (comment)

Regarding:

As with all animation in the interface, it is automatically disabled if the "reduce motion" accessibility setting is enabled in your operating system or browser.

I believe most people will not know how to adjust this setting. So let us please go with something that is subtile.

[critterverse]

Thanks for the notes @paaljoachim.

I find the animation confusing not knowing why it is animated.

The goal of animating the style variation tile is to be able to include additional information (such as more swatches from the variation color palette) than is currently possible to show in the resting state. The limited size of the thumbnail tile inspired the "color fill" approach we've been experimenting with, with the idea being to showcase a maximum amount of color via sliding bars that take over the entire frame.

As with all animation in the interface, it is automatically disabled if the "reduce motion" accessibility setting is enabled in your operating system or browser.

As a general approach, I think it makes sense to rely on the user's personal settings rather than going with a "reduce motion" approach by default since folks have such a wide range of preferences around animation.

[paaljoachim]

The goal of animating the style variation tile is to be able to include additional information (such as more swatches from the variation color palette) than is currently possible to show in the resting state.

Use of animation to show colors is difficult, as colors are easily blurred because of the animation.
What the animation is trying to get across we could instead bring into the resting state. Making it easier for folks to use time to study each color that will be used for the specific style.

[pablohoneyhoney]

Sweet stuff!

I'm unsure if the second state needs to deliver a different view. If the added value is the name/label, perhaps just the name in the specific font and leveraging the colors in that comp playing simply with the font color and bg, rather than a new preview with another way of delivering the information?

Additionally, I wasn’t following up closely and it's likely part of a different thread, but the "other styles" access feels too prominent and unbalances the rest of the panel, imo. It could also have a different, more clearer CTA: change or browse styles.

[shaunandrews]

This definitely looks cool and might add some "delight" to the experience, but from a utility point of view I don't get it — as others have said above, the way everything changes when hovered is more confusing than helpful. I didn't understand that "Dark" was the label of the variation, and found the Netflix-style color bar animation disorienting.

I do think there's plenty of room for something fun like this, but maybe working with the existing elements rather than so much movement of new elements.

[franrosa]

From an accessibility perspective, apart from the speed of the animation, there is the issue of changing content and position of elements inside the square.

It would be a kinder approach if over the original resting state, the animation showed the colors as bars — ie. a wave animation — without ever covering the entirety of the square, and allowing the original content to remain in place without moving.

[youknowriad]

Is this issue still relevant. Seems like we've kind settled on the current animation?

[jasmussen]

There's no harm in closing, since it can be reopened if this comes up again!