diff --git a/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx b/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx index 4b58f8930..69885b989 100644 --- a/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx +++ b/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx @@ -19,6 +19,7 @@ import { } from '@/Components/Panes/PaneAnimator' import { isPanesChangeLeafDismiss, isPanesChangePush } from '@/Controllers/PaneController/panesForLayout' import { log, LoggingDomain } from '@/Logging' +import { useMediaQuery } from '@/Hooks/useMediaQuery' const NAVIGATION_PANEL_MIN_WIDTH = 48 const ITEMS_PANEL_MIN_WIDTH = 200 @@ -53,7 +54,8 @@ const PanesSystemComponent = () => { const [_editorRef, setEditorRef] = useState(null) - const animationsSupported = isMobile + const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)') + const animationsSupported = isMobile && !prefersReducedMotion useEffect(() => { if (!animationsSupported) {