2. Operable · 2.2 Enough Time

2.2.2 — Pause, Stop, Hide

Level A

Engineering guidance on this page is adapted from Appt.org (Appt Foundation), used under the CC BY-SA 4.0 license. In keeping with that license, the adapted content on this page is likewise available under CC BY-SA 4.0. "Appt" is a registered trademark of the Appt Foundation; this page is not affiliated with or endorsed by Appt.

Disable animations

On Android, you should provide buttons to pause, stop or hide content. You could use the ANIMATOR_DURATION_SCALE and/or TRANSITION_ANIMATION_SCALE preferences to check if animations should be disabled. If either value is zero, you could choose to disable (non-essential) animations in your app.

kotlin

val duration = Settings.Global.getFloat(
    context.getContentResolver(), 
    Settings.Global.ANIMATOR_DURATION_SCALE, 
    1f
)

val transition = Settings.Global.getFloat(
    context.getContentResolver(), 
    Settings.Global.TRANSITION_ANIMATION_SCALE, 
    1f
)

if (duration == 0f || transition == 0f) {
    // Disable animations
}

In Jetpack Compose, you should provide buttons to pause, stop or hide content. You could use the ANIMATOR_DURATION_SCALE and/or TRANSITION_ANIMATION_SCALE preferences to check if animations should be disabled. If either value is zero, you could choose to disable (non-essential) animations in your app.

koltin

val duration = Settings.Global.getFloat(
    LocalContext.current.contentResolver,
    Settings.Global.ANIMATOR_DURATION_SCALE,
    1f
)

val transition = Settings.Global.getFloat(
    LocalContext.current.contentResolver,
    Settings.Global.TRANSITION_ANIMATION_SCALE,
    1f
)

if (duration == 0f || transition == 0f) {
    // Disable animations
}

On iOS, you can read the UIAccessibility.isReduceMotionEnabled property. If the value is true, you could choose to disable (non-essential) animations in your app. You can do this, for example, with the setAnimationsEnabled method.

swift

if UIAccessibility.isReduceMotionEnabled {
    UIView.setAnimationsEnabled(false)
}

In SwiftUI, you can read the UIAccessibility.isReduceMotionEnabled property. If the value is true, you could choose to disable (non-essential) animations of your views. You can do this, for example, with the transaction) modifier by setting the value of disabledAnimations to true or to the value of UIAccessibility.isReduceMotionEnabled.

Note: For the changes to take effect, you need to reload the view or setup a listener for reduceMotionStatusDidChangeNotification

swift

AnimatedView()
    .transaction { $0.disablesAnimations = UIAccessibility.isReduceMotionEnabled }

With Flutter, you can use MediaQuery.of(context) to retrieve the value of disableAnimations. If the value is true, you could choose to disable (non-essential) animations in your app.

dart

if (MediaQuery.of(this).disableAnimations) {
    // Disable animations
}

In React Native, you can use AccessibilityInfo to check get the value of isReduceMotionEnabled. If the value is true, you could choose to disable (non-essential) animations in your app.

jsx

import { AccessibilityInfo } from "data/en/screen-animations/react-native";

if (AccessibilityInfo.isReduceMotionEnabled()) {
  // Disable animations
}

In MAUI, animations are disabled by default if the user has that option enabled in the device settings. However, you can check and apply custom logic by using platform-specific code.

csharp

#if IOS

if(UIKit.UIAccessibility.IsReduceMotionEnabled)
{
    UIKit.UIView.AnimationsEnabled = false; ;
}

#elif ANDROID

var duration = Android.Provider.Settings.Global.GetFloat(
    Platform.AppContext.ContentResolver,
    Android.Provider.Settings.Global.AnimatorDurationScale,
    1f);

var transition = Android.Provider.Settings.Global.GetFloat(
    Platform.AppContext.ContentResolver,
    Android.Provider.Settings.Global.TransitionAnimationScale,
    1f);

if (duration == 0f || transition == 0f)
{
}

#endif

← Back to Engineering Support

2.2.2 — Pause, Stop, Hide

Disable animations

Android

Jetpack Compose

iOS

SwiftUI

Flutter

React Native

.NET MAUI

Xamarin