Motion

Like color or typography, motion can create a strong foundation that helps connect the complex elements within your designs. By carefully incorporating motion into the design of a UI, you can create products that are more clear, engaging, and expressive. Effective motion design should be intentional, and should be used to help guide users through their experiences more efficiently.

This resource outlines our motion design principles and the different types of motion in PatternFly.

For detailed guidance on implementing and customizing animations, refer to our motion development guidelines.

These principles guide the use of motion in PatternFly and align with our brand voice and tone.

PatternFly components support motion in the form of micro animations, which are small, unobtrusive, and often understated. These animations serve specific purposes within a UI, and are designed to be subtle and complementary. To ensure an accessible experience, every animation adapts to and respects a user's system-level settings for reduced motion.

While many components feature animations by default, there are [opt-in animations](/development guide#opt-in-animations) that require manual configuration. If you're interested in implementing motion outside of what we support by default, you can use our motion tokens to create a custom animation for your specific scenario. Take care to stay aligned with our motion principles.

An animation is composed of 4 elements:

• Triggers
• Duration
• Easing
• Properties

A trigger is the event that causes the animation to happen.

• User-initiated: Animations that are triggered by user actions, like hovering or clicking.
• System-initiated: Animations that are triggered by system events or after a certain amount of time, like notifications and alerts.

The duration of an animation refers to the amount of time that it takes to complete. Optimal timing can change based on the size of the element itself and the viewport.

• Short: Quick animations for simpler effects and subtle motion, like fading or color changing.
• Long: Longer animations for more complex effects and large-scale motion, like page transitions or objects that slide into the screen.

The easing of an animation refers to how the animated element transitions over time. Careful use of easing helps ensure that animations feel smooth and natural, rather than jarring and disjointed. For example, an element might accelerate quickly but decelerate slowly, or vice versa.

An animation's properties are the specific visual characteristics of the element that change during a transition. An animation may combine multiple properties to create its effect, including:

• Fade in/out: The opacity of the element.
• Scale: The size of the element.
• Rotate: The direction of the element.
• Color transitions: Changes in the color of the element.
• Slide in/out: Changes in the position of the element, relative to the edges of the screen.
• Expand/collapse: Changes in the toggled visibility of an element.

Animations typically fall into one of the following categories:

• Container placement
• Expansion
• Feedback
• Progression

By managing how container components appear and disappear, container placement animations can better orient users. When triggered, containers move into place with purpose, creating a clear spatial relationship between a user's action and the result.

This can be observed in the following components:

• Drawer: Slide in from edge of screen
• Menus: Fade into position beside menu toggle

By guiding a user's focus, expansion animations make newly revealed information easier to process. When a user opens a section, a gentle fade and slide transition draws their eye to the content. The reverse occurs upon closing, creating an engaging and predictable interaction.

This can be observed in the following components:

• Accordion
• Dual list selector (with tree)
• Expandable section
• Form (field groups)
• Navigation (expandable)
• Search input (expandable)
• Tree view
• Table (in beta): Expandable table and compound expandable table

By responding to user input and system changes, feedback animations provide reassurance that the system is responding to their actions. This clarity reduces confusion, confirms the results of an action, and can signal what will happen next.

This can be observed in the following components:

These components have animations that are triggered by hover, clicks, and focus.

• Buttons: Fill ripple on click
• Icon buttons:
  • Favorite: Pulse and fill on click
  • Hamburger menu: Transform on click
  • Settings: Rotate on hover
• Menu toggles: Border fade in on click
• Tabs: Slide border on click

These components have animations that are triggered by errors in validated inputs.

• Forms (validated inputs)
• Menu toggle (status toggle)
• Progress (with error)
• Progress stepper (with error)

These components have animations that are triggered by system-level events.

• Alerts (within groups) Slide and fade in/out
• Notification badge: Rotate icon

By showing that a process is underway, progression animations manage user expectations during waiting periods and communicate that the system is working on a request. This feedback provides clarity that gives users confidence to wait for processes to complete.

• Progress stepper (in process): Animated spinner
• Skeleton: Gradient pulse

A motion pattern is a combination of tokens and properties that work together to solve common animation needs. These patterns help ensure that the behavior of a type of animation is consistent across similar use cases—even if different components are involved.

Used within feedback animations, the "button ripple" pattern applies the appropriate clicked color in a ripple outward from the center of the button. This includes all button variants, with the exception of inline links. This pattern provides clear, tangible feedback that the button was successfully pressed, confirming the user's action.

Used within feedback animations, the "error jiggle" pattern "jiggles" the animated component (and typically related helper text) from side to side as danger styles are applied. This pattern helps ensure that critical errors in a UI, which require correction, quickly catch users' attention.

In reduced motion conditions, the related error helper text instead simply fades into view, rather than jiggling as well.

Used within expansion animations, the "fade and slide" pattern applies a fade-in and slide-in transition as hidden content sections are expanded in a component. A similar, reversed animation applies when expanded sections are collapsed. This pattern orients the user by creating a clear, smooth connection between their action and the newly revealed content.

In reduced motion conditions, the entire hidden section instead simply fades into view when expanded, rather than also sliding in.