Modify Frame animation of styles grid #39717
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +113 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
Awesome!! A couple of thoughts on the animation, feel free to take 'em or leave 'em: The color array can do some heavy lifting in terms of transitioning between the elements, so we may be able to remove some instances of fading in and out. For example, the Aa and dots on the initial frame could get covered up by the color array without a fade. The bar of color swatches on the final frame could also be revealed in a wipe motion as the color array leaves the frame. This might help streamline and tie everything together more closely. For the final frame, it looks nice when the the variation title slides into position from the right while also fading in to mirror the motion of the color array. The motion of the color array is already looking great but a couple of things we could try to refine even further:
|
|
This is nice. Keep in mind in the following GIF, I have older style variations for TT2, the newer ones also affect the background and come with names, so ignore that aspect, but even with these older versions, it's adding a great deal of life and context:
On the final frame, I'd echo Channing that the text label sliding in from the right would dovetail nicely with the color wipe. And speaking of that final frame, it migth even work so well that we can do without the color bar. I like that color bar on the final frame especially on the larger cards, but when the cards are small, it's less discernible. I guess we have options there. One more thing I appreciate about this one is that it gets us closer to #38934 in terms of the initial Aa plus dots style card. The two dots are still a bit closer to each other, it looks like, than they should be. But overall spacing seems better. |
mtias
force-pushed
the
add/styles-preview-animation
branch
from
8272c9b to
af96017
Compare
|
I'm picking this back up and going for something different. |
mtias
added
Global Styles
mtias
changed the title
mtias
force-pushed
the
add/styles-preview-animation
branch
2 times, most recently
from
48a58f0 to
67c4b53
Compare
jasmussen
approved these changes
Oct 5, 2022
There was a problem hiding this comment.
I liked the color bar of the existing one, however in practice it hasn't necessarily showed as much diversity of style as I had hoped. So I'm happy to try this one, which feels very fluid and smooth:
It looks like you rebased recently, so focus style changes from #44612 should've been picked up, but they didn't appear to work in my testing. Could use another look just to be sure.
Finally, the border inside the "Whisper" style appears to be causing some trouble, not showing the bottom border, and pushing the text rightwards:
Something to look at. Otherwise, feels great!
Construct a backdrop with a blurred out color palette from the json.
mtias
force-pushed
the
add/styles-preview-animation
branch
from
67c4b53 to
2a3e596
Compare
34 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Aim to implement a similar animation to the one proposed in #39700.
Went in a different direction in the end. This aims both to strike a simpler state for the hover and bring in more personality to the animation, for an action that is not performed common or very often.
Screen.Recording.2022-10-05.at.09.24.02.mov
It's constructed by generating a tier of colors from the theme palette, rendering it a stripes, and blurring it out at different intensities to tint the background while we overlay the name with the relevant typography.
The goal is to help convey the fact variations are more than just color and can be responsible for an entire look and feel.
There are other ways in which we should show the full extent of palettes, typography, etc, in a details panel for the currently active variation and more permanently.