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 guide outlines the principles that drive motion design in PatternFly and describes the different types of motion that are supported in our design system.

These principles guide the use of motion in PatternFly, to ensure consistency and alignment 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.

Animations are largely built into PatternFly components, but there may be instances where you need to use our motion tokens to enable an animation in your specific scenarios. Wherever PatternFly provides animation, reduced motion support (based on users' browser settings) is provided.

If you want to implement additional motion, or if you'd like to customize the default PatternFly behavior, follow these practices.

There are 5 different types of animations used in PatternFly:

1. Hover: Shown when a user hovers over an element to inform them that the item can be clicked.
2. Click: Shown when a user clicks an element, in order to provide immediate feedback that confirms user actions.
3. Loading: Loading animations, like spinners or progress bars, which keep users informed about the loading process in order to reduce frustration.
4. Errors/validation: Shown when an error occurs during a validation process, in order to draw attention to error messages and guide users as they resolve issues.
5. Change: Smooth transitions between different screens or sections of an application or website that enhance user flow and engagement.

An animation is composed of 4 elements: triggers, duration, easing, and properties.

1. Triggers: The event that causes the animation to happen. These can be:

   • User-initiated. For example, a gesture or click.
   • System-initiated. For example, after a certain amount of time.

2. Duration: Describes how long animations should be.

   • Shorter durations are used for simpler effects and smaller animations. For example, fading or color changing.
   • Longer durations are used for more complex effects and larger-scale animations. For example, page transitions or objects that slide in and out of the screen. Optimal timing can change based on viewport size.

3. Easing: Describes how an element transitions over time.

4. Properties: The characteristics of the element being transitioned. Animations may have multiple properties, including:

   • Fade in/out
   • Scale
   • Rotate
   • Color transitions
   • Slide in/out
   • Expand/collapse

In Figma, you can find annotations and prototype videos for each animation...

PatternFly component animations are created using design tokens that cover the different elements of an animation, including duration, delay, and timing. Like we do with color tokens, we implement motion by using semantic tokens, which are built off of base tokens. Motion tokens begin with -pf-t--global--motion--

You can search for motion tokens here.

If you aren't familiar with our token system, refer to this overview.

Duration tokens specify the length of time that different animation should take to complete. There are predefined duration tokens based on the type of animation, shown in the following table;

Delay tokens specify the length of time that should pass before an animation begins. Delay options include none, short, default, and long.

Timing-function tokens specify the easing path that an animation takes. These paths are defined by cubic Bezier curves, which define the start and end points of a curve, as well as its initial and final times and states.

The available options for timing are described in the following table:

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.

For example, an "action fade" pattern may dictate how animation is applied when a user selects an action. This pattern specifies the timing and duration of the fade, so that the animation is the same across different action components. In this example, we would want users to see the same hover/click animation whether they're interacting with an action button, an action menu, and so on.

For some scenarios, like creating a new PatternFly extension, you may need to customize motion that doesn't already exist in PatternFly components. When you're creating a new animation behavior, make sure that:

• There is no existing support for the animation.
• The animation adheres to our motion principles and respects users' prefers-reduced-motion settings.
• Your implementation uses appropriate semantic tokens.