Accessible Lottie animations
A guide to help users with motion sensitivity by making your Lottie animations accessible.
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:
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.
By using markers instead of specific frame numbers you won't have to make any changes in code when you update an animation.
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.