Animation principles

Animations can be utilized to provide feedback, add delight, and educate users. When considering adding animations to a product, consider these guiding principles.

Principles

Helpful

Animations are used sparingly, and only when there is a clear, intentional reason for them. They help a user complete a task or learn new information, and should not distract the user for accomplishing a goal. Every animation should serve a purpose and not be added simply for the sake of having animation.

Direct

Animations only last as long as needed to help guide the user. They are directed toward specific elements and follow a logical progression based on purpose or location of those elements. They are intuitive and perhaps even unnoticed because they feel natural and expected.

Accessible

Animations must be implemented in a way that maintains accessibility, ensuring they do not cause the user any harm. Most of the time this means respecting a user’s device motion settings and disabling any animations when “use reduced motion” is turned on.