Accessibility

Prefers reduced motion

Motion comes with reduced motion support.

Reduced motion, (opens new window) enables users to tell websites they don't want to see animations.

Is reduced motion (outside React)

Use the isReducedMotion() function when performing motion at runtime and outside the context of a React render.

import { isReducedMotion } from '@atlaskit/motion';

const onClick = () => {
    if (!isReducedMotion()) {
        // do the motion
    }
};

Use reduced motion (React)

Use the useReducedMotion() hook when performing motion at runtime and in the context of a React render.

Using a hook is preferable to calling isReducedMotion() here, as the hook can re-render your component if the user's motion preference changes at runtime. This means they don't need to refresh the page for their change to take effect.

import { useIsReducedMotion } from '@atlaskit/motion';

const FancyChart = (props) => {
  const isReducedMotion = useIsReducedMotion();
  return <ThirdPartyChartingLibrary data={props.data} animate={!isReducedMotion} />;
}

Prefers reduced motion (CSS)

You should disable your motion styles (animation or transition) for users who prefer reduced motion, by using the media query @media (prefers-reduced-motion: reduce) in your styles:

import { cssMap } from `@atlaskit/css`;

const styles = cssMap({
    root: {
        transition: 'opacity 0.5s ease',
        '@media (prefers-reduced-motion: reduce)': {
            transition: "none",
        }
    }
})

Was this page helpful?

We use this feedback to improve our documentation.