Accessible and Inclusive iOS/SwiftUI Animation/Motion Cheatsheet For Developers

Animations and motion can be dizzying for some app users. Let's fix that with these practical examples and following the motion accessibility guidelines outlined in this repo. Do you see something else? Contact @amos_gyamfi and @stefanjblos on Twitter.

Resources we have

• Apple Developer Videos: Accessibility
• HIG: Accessibility
• WCAG: Motion specific section
• Apple Design Awards: Inclusion section

---

Why use animations?	Example
Delight and playfulness (Duolingo)
State change: Hamburger to close icon
Draw user’s attention

Why use animations?

• Delight and playfulness (Duolingo)

---

• State change: Hamburger to close icon

---

• ‼ Draw user’s attention

---

• Guidance: Replace telling with showing

---

Types of Animations

• Programmatically initiated: Loading (where the fun starts)

---

How to build your animations

• Symbols, Phase, Keyframe, Spring:

---

What animations/motion may be distractive?

• Frequent particle animations: Rain, clouds, slowly moving stars, thunder
• Parallax: Multi-speed & multi-direction (can cause mismatch)
• UIMotionEffect: Creates a perception of depth
• Fun to use but can be disorienting
• Can cause motion sickness
• Persistent background and foreground effects: Stars and clouds

---

• Zooming and scaling animations: App icon throwing animation on iOS

---

• Spinning or rotating effects

---

• Bouncy & swoopy effects: Reactions in Telegram

---

• Bouncing & wave-like movement

---

• Animating depth changes: Z-axis layers and multi-axis
• Edit Widgets: Card flip animation

---

• Multi-sliding animations
• Moving in the opposite direction to the user’s scroll direction

---

• Intense Animations: Glitching and flicking effects

Example: HoloVista

---

• Blinking animation: Can cause epileptic

episodes

---

Guide 1: Pause, Play, Hide

• Autoplaying GIFs and videos: show play/
• pause buttons
• Background animations: Hide buttons
• Animated illustration: Play/pause controls
• (looping more than 5x)

---

Guide 2: Don’t blink/flash more than 3 in 1 sec

• People with visual disabilities: Distracting and not useful
• Blinking: Can cause seizures
• Great example: iOS Screen recording animation

(Dynamic Island)

• Replace flashing: Varieties of SF Symbol animations to

convey information

---

Guide 3: User-initiated animations

• Provide a way to disable animations
• Great example: Animated bouncy reactions in Telegram

---

Reduce Motion: General Settings

• Provide unnoticeable or reduced behavior
• Not removing all animations
• GIFs and videos: Use image image-switching

technique

• App Store: Horizontal card scrolling animation

---

Reduce Motion: General Settings

• Settings App: limit animations/motion in all apps
• Scaling and zooming animation: Throwing animation of launching an iOS app icon

---

Reduce Motion: Prefer Cross-Fade (iOS 14)

• What?: SwiftUI NavigationLink - Cross-fade transition
• Push segues with slide-in/out animations: UIs appearing/disappearing

---

Reduce Motion: Prefer Cross-Fade (iOS 14)

• When to use: When there is no suitable replacement animation

---

Reduce Motion: Prefer Cross-Fade (iOS 14)

• Enabled: Replaces sliding transitions with a subtle fade
• Use NavigationLink to get it for free
• Example: Settings App

---

Reduce Motion: Per-app Settings

• Settings App: Remove some animations for specific apps

• App Store: Autoplay animated images and video previews

• Example: Downloading Headspace

---

A c c e s s i b l e + I n c l u s i v e A n i m a tions

• Stitch Game: Solve number puzzles by filling out patterns
• Reduce Motion enabled: Disables all sudden movements

---

Use Motion: In-app Settings

• Use Motion: In-app Settings
• Reduce Motion: Does not stop all problematic animations
• Control what should stop and not
• Great example: PCalc

---

---

Checking Reduce Motion

Adopting Reduce Motion

• Bouncy Transition: Reduce Motion Off

---

Adopting Reduce Motion

• Alternative animation duration: Short enough to make it unnoticeable (0 sec)
• Remove animation altogether: nil

---

Adopting Reduce Motion

• Provide an alternative reduced behavior
• Example: Switch a bouncy hamburger/close icon with a gentle one

---

Adopting Reduce Motion

• Setting animation duration to 0

---

VoiceOver

• Test animations: Ask Siri to “Turn on VoiceOver.”
• Hide decorative decorative animations

---

VoiceOver: Animation Without a Label

• Navigate with a swipe gesture
• VoiceOver skips the animation
• VoiceOver: Animation With a Label
• Add labels for animations that have

Sound version

---

Adding Haptic Feedback To Animations

• Mimicking physical touch and drag:
• Example: Stitch

---

Adding Haptic Feedback To Animations

• Silent Mode On: Emulate the absence of sound

• Example: Reporting an incoming or outgoing call

---

Follow basic accessibility guidelines

• Screen flashing can cause headaches and seizure
• Provide similar visual effects without requiring motion
• Excessive motion can cause discomfort, dizziness
• Example: Parallax, sliding animations

Wrap Up

• Be mindful of motion usage
• Prefer using NavigationLink: Avoid custom slide transitions
• Reduce Motion: Provide options to limit ****animation and motion effects
• Is VoiceOver enabled? Think of how you can clearly translate animations
• Spent time on what can be dizzying/jarring
• Use subtle motion effects
• Can this animation cause discomfort?
• How can people with motion sensitivities enjoy my app?
• What if the user’s reduced motion setting is on?
• Will springiness/bounciness feel out of place?

Where to go from here?

• Apple Design Awards: Inclusivity Winners
• Apple Human Interface: Accessibility
• Apple Developer Videos
• Responsive Design For Motion
• Playing Haptics