Automattic
Pattern Assembler - CSS transitions for engagement
We could to add little CSS transitions when we show the pattern selector or when a pattern is added, deleted, or sorted to make the UI more engaging.
Some classic transitions are fade in/out, slide or scale. Here is a complete demo guide for reference.
For more complex transitions of React state, I see we previously used the dependency react-transition-group. A more modern approach is creating a custom hook @Automattic/ganon what do you think? I would love to hear your ideas and welcome contributions too.
Maybe we can add a third-party 1kb dependency called transition-hook . Looks fun!
Some UI actions that can be animated are:
- mount preview placeholder
- mount pattern list empty
- hover the blue links to add patterns
- hover pattern title to show icon buttons
- hover icon buttons
- transition from the pattern list to the pattern selector
- transition back from the pattern selector after add/replace pattern
- pattern added/replaced
- pattern deleted
- pattern moved up/down
- others?
Screenshots for reference
Icon buttons
| Patterns list | Pattern Selector |
|---|---|
 |
 |
Related
Micro-interactions And Their Role in UX Design Micro-Interactions: a designer’s superpower
@SaxonF Let's have some fun!
We have deployed the first iteration in https://github.com/Automattic/wp-calypso/pull/68028. I'll leave this issue open to address feedback from @SaxonF and continue adding more CSS transitions in follow-up PRs.