Reduced Motion

• Last updated: • 3 min read • AccessibilitySwiftUIAnimations

Reduced motion is an important accessibility feature that helps create a comfortable user experience for individuals sensitive to motion effects.

What is Reduced Motion?

Reduced Motion is an accessibility feature available on iOS, macOS, and other Apple platforms that minimizes the amount of motion and animation in the user interface. This feature is designed to help users who may experience motion sickness or discomfort from excessive animations and transitions.

When Reduced Motion is enabled, the system reduces or eliminates certain animations, such as parallax effects, screen transitions, and other dynamic visual effects. Developers can also respect this setting in their apps by checking the user's preference and adjusting their animations accordingly.

How to Check for Reduced Motion in SwiftUI

In SwiftUI, you can check if the user has enabled Reduced Motion by using the accessibilityReduceMotion environment value. You can then conditionally apply animations based on this setting.

import SwiftUI

struct ContentView: View {
    @Environment(\.accessibilityReduceMotion) var reduceMotion
    @State private var isVisible = false

    var body: some View {
        VStack {
            Button("Toggle Text") {
                if reduceMotion {
                    isVisible.toggle()
                } else {
                    withAnimation {
                        isVisible.toggle()
                    }
                }
            }

            if isVisible {
                Text("Hello, SwiftUI!")
                    .transition(.slide)
            }
        }
    }
}

Bonus: CSS

You can also reduce animations on your website (if you have any).
You can copy & paste the following code in your css.

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

source: https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites

Wrap up

In this post we've explored Reduced Motion and how to respect user preferences in SwiftUI. By checking the accessibilityReduceMotion environment value, you can ensure a comfortable experience for users who are sensitive to motion.

Resources:

Read more

Share


Share Bluesky Mastodon Twitter LinkedIn Facebook