Micro-animations in PatternFly

[andrew-ronaldson]

Background

It is now an industry standard for Design systems to ship with micro-animations baked into its components. The use of motion provides users with haptic feedback as they interact with the product UI. Products with micro-animations and transitions decrease the perceived time for actions to be complete.

Goals

• Establish and document Motion principles that can be consistently applied across components.
• Apply micro-animation to our PatternFly 6 components to elevate PatternFly into a more intuitive, engaging, and vibrant experience.
• Micro-animations will be shipped as part of the design system with minimal impact to product teams adopting PF6* (See Considerations).
• Communicate the new features via Medium article, Community meetings, Office Hours, product meetings, etc.

Considerations

• Schedule updates with stakeholders (including RHDS) and collect feedback.
• May require products to modify tests. We have built a mechanism to turn off motion styling if needed.
• Certain components like the notification badge will require products to connect notifications to the class that triggers the animation.
• Check extensions to make sure they inherit the component updates.

Research and references

A recent PatternFly 6 study with internal stakeholder is the most recent request for animations. This has been an ongoing discussion between UXD and PatternFly and we appreciate the community support.

PF team of contacts

Design: @kaylachumley
Core: @srambach
React: @thatblindgeye