Motion

We try to support animations by default in our components, but—to avoid introducing breaking changes—some animations require you to manually opt in. Opt-in animations require additional updates to your codebase and, depending on your testing setup, could cause test failures if not configured appropriately.

The following components contain opt-in animations, with links to examples for proper implementation:

• Alert (within alert groups)
• Dual list selector (with tree)
• Form field groups
• Navigation (expandable)
• Notification badge
• Search input (expandable)
• Table (expandable) (in beta)
• Table (compound expandable) (in beta)
• Tabs (HTML-only implementations)
• Tree view (all examples)

Note: In some edge cases, resource-intensive pages can cause browser memory issues where animations fail to run correctly. For example, animated spinners are particularly memory intensive, so a page with multiple spinners might consume too much memory and disable all animations.

We offer the enable-animations codemod that automatically adds the hasAnimations prop to components that require opt-in.

Be aware that, depending on your codebase, this codemod could introduce breaking changes that require further attention. When you run the codemod you will be asked whether to opt into animations only for the @patternfly/react-core package or for @patternfly/react-table as well.

To enable opt-in animations run the following command:

npx @patternfly/pf-codemods --only enable-animations /path-to-src

The AnimationsProvider is a React context provider that gives you global control over animation behavior in your application. Using it allows you to centrally manage animations across all PatternFly components in your codebase, making it easy to disable them for users who prefer reduced motion or to optimize performance.

Place the AnimationsProvider at the root of your application to provide global animation configuration for all PatternFly components, either passing in hasAnimations: true or hasAnimations: false:

// App.tsx or index.tsx
import React from 'react';
import { AnimationsProvider } from '@patternfly/react-core';
import { MyApplication } from './MyApplication';

const App: React.FunctionComponent = () => {
  return (
    <AnimationsProvider config={{ hasAnimations: true }}>
      <MyApplication />
    </AnimationsProvider>
  );
};

export default App;

When using the AnimationsProvider, you can still pass hasAnimations directly to a component to override the global setting of true or false. For example: <AlertGroup isToast hasAnimations={false}> will override a global setting of true.

You can also wrap components with the AnimationsProvider and control animations there:

<AnimationsProvider config={{ hasAnimations: false }}>
  <AlertGroup isToast>
    {criticalAlerts.map(alert => (
      <Alert key={alert.id} title={alert.title} variant={alert.variant} />
    ))}
  </AlertGroup>
</AnimationsProvider>

You can enable animations conditionally, based on user preferences or system settings:

// App.tsx - Respect user's motion preferences
import React from 'react';
import { AnimationsProvider } from '@patternfly/react-core';
import { MyApplication } from './MyApplication';

const App: React.FunctionComponent = () => {
  // Respect user's reduced motion preference
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  return (
    <AnimationsProvider config={{ hasAnimations: !prefersReducedMotion }}>
      <MyApplication />
    </AnimationsProvider>
  );
};

For some scenarios, like creating a new PatternFly extension, you might need to implement custom motion behavior. When creating a new animation, ensure the following:

• There is no existing support for the animation.
• The animation adheres to our motion principles and respects prefers-reduced-motion settings.
• Your implementation uses appropriate semantic motion tokens, as detailed in the following section.

PatternFly component animations are created using design tokens that specify duration, delay, and timing. We implement motion by using semantic tokens, which are built off of base tokens. Semantic motion tokens begin with --pf-t--global--motion--

When implementing custom motion, you should familiarize yourself with our token system and use the motion tokens outlined in our documentation.

Duration tokens specify the length of time that different animation should take to complete. We offer predefined duration tokens based on each type of animation.

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

Timing tokens specify the easing path that an animation takes, defined as cubic Bezier curves, that indicate the start and end points of a curve, as well as the initial and final times and states.

You can manually test for reduced motion in 2 ways:

1. In your browser:

   • Chrome
   • Firefox
   • Safari

2. In your OS:

   • macOS: Go to System Settings > Accessibility > Display and enable "Reduce motion".
   • Windows 10: Go to Settings > Ease of Access > Display and turn off "Show animations in Windows".
   • Windows 11: Go to Settings > Accessibility > Visual Effects and toggle "Animation Effects" off.