Animation

Beautiful, subtle animations throughout macOS convey status, provide feedback, and help users visualize the results of their actions. For example, when the user duplicates a TextEdit document, the copy springs forth from the original to illustrate that it's a duplicate, and becomes the active window.

Standard interface elements automatically benefit from the system’s built-in animations. If you want to design custom animations for your app, do so with goals of keeping people oriented, providing clear feedback in response to user actions, and calling attention to specific locations on the screen.

Strive for realism. Realistic movement can help people understand how something works. For example, when using Mission Control to reveal the Desktop, all open windows slide out of the way as if you were swiping physical papers out of the way on a desk.

Avoid using animations for interactions that occur frequently. Repetitive animations that occur often can lead to the perception that efficiency is being compromised for the sake of animation. The system already employs subtle animations for interactions with standard interface elements. Don’t make people spend extra time watching unnecessary animation every time they interact with something.

Enhance feedback and understanding. It’s important that people don’t lose context when performing actions with immediate results. Use animation to put these actions into a more human time frame. For example, when minimizing a window, it doesn’t just disappear from the screen and reappear in the Dock; instead, it moves fluidly from the screen to the Dock so the user knows exactly where it went.

Transition smoothly between object states. Showing only the beginning and ending states during a transition, such as a resize, can be jarring. Animated transitions provide continuity and feel more natural.

Allude to consequences. Build confidence and reduce mistakes by previewing the results of actions. For example, when you drag an item to the Dock, other items move aside, showing where the new item will reside when dropped.

Make sure full-screen mode transition animations are smooth. The system automatically animates windows as they enter and exit full-screen mode. If your app includes elements that aren't animated by this transition, use custom animations to ensure a consistent experience. For example, if a window includes a secondary bar below the toolbar (like a favorites bar), it should seamlessly transition along with the toolbar.

Use animation and motion effects judiciously. Don’t use animation for the sake of using animation. Excessive or gratuitous animation can make people feel disconnected or distracted, especially in an app that doesn’t provide an immersive experience.

Make animations optional. When the option to reduce motion is enabled in accessibility preferences, your app should minimize or eliminate application animations.

For developer guidance, see Getting Started with Graphics & Animation and Graphics and Games.