Motion can be a great source of brand expression and can enhance the user experience by visualising something with an animation instead of text.

However not all users will have a good experience with motion. It can negatively impact their experience they could deal with motion sensitivity, difficulties focussing on a task or even slowing down a device.

Native transitions between screens will automatically adapt to the "Reduced motion" setting. But custom animations need to be adapted to support reduced motion. You can do this easily in just a few steps:

‍

Add markers

If animation is not necessary, you can simply pause your animation at a specific frame. This will show users with "Reduced motion" turned on a static image.

You can add a marker on your animation in After Effects, which will also be exported when saving your Lottie animation.

Create a marker at the frame you want to display and name it something like "reduced-motion", make sure the name is correct, it has to match the exact name used in code.

‍

Double click the marker, an overlay will open where you can enter the name.

In the Composition Marker your can add a comment. Here you can enter a name that will be used in code to pause the animation on. Name example: reduce-motion

‍

By using markers instead of specific frame numbers you won't have to make any changes in code when you update an animation.

‍

Code example

if UIAccessibility.isReducedMotionEnabled {
  animationView.pause()
  let pauseTime = animationView.frameTime(forMarker: "reduce-motion")
  animationView.currentFrame = pauseTime ?? 0
}

‍

Slow down animations

If you really depend on an animation in your interface, you can simplify your animation or simply slow it down for users with reduced motion turned on.

‍