Animation

When used properly, animation can guide people through our products. It can draw them toward critical information more quickly, alert them to errors, and bring clarity and understanding to even the most complex interface.

Interface animation is incredibly powerful, that’s true—but it can be just as difficult to apply effectively. Here are some guiding principles for introducing animation to your product.

Design principles

These principles aim to suggest approaches and sensible defaults for how animation fits into the Resonance ecosystem. Animation can be helpful, it’s not always critical, so it is important that it only added to enhance the experience. These principles can help guide if animation is right for your scenario:

Purposeful

Animation is most effective when it has a clear, communicative purpose. Every animation we add to our interfaces should serve a purpose: an animation should provide a sense of hierarchy, or of meaningful direction; it should draw attention to an important element, or communicate that an action occurred.

• Animation should only be used when it provides clarity or direction.
• Think about what is changing, why it’s important, and whether animation helps communicate that or not.
• Effective animation provide trust by signaling that the product is working.

Accessible

An accessible animation respects people with different needs. Some may not see the screen; others may become confused or sickened by moving elements. To that end, our interfaces should always be understandable without the animation—put another way, our animation is an enhancement to an already well-designed interface.

When someone signals that they do not want animation, whether due to preference or need, we should listen to them. In those cases, we should simplify our animations or, when appropriate, disable them.

Respectful

People rely on our products to get their jobs done. As a result, our animations should respect their time, emphasizing clarity above all else, and communicating without excessive or needless flourish. This helps establish trust between our products and our audiences.

An animation should be simple when applied to repetitive tasks; more complex animation should be reserved for tasks encountered less frequently.

Consistent

When thoughtfully, consistently applied, animation can create connectedness throughout our interfaces. Every Resonance component is animated to a shared rhythm and movement. When we add additional animation to our products, it should feel part of that greater whole.

• Be mindful of which axis you are animating—x-axis (left-right), y-axis (up-down), or z-axis (forward-back)—and be consistent in your usage across similar interactions.
• Consider the context, and work to apply similar animations for existing shared contexts. For example, all buttons should have similar animations.

Usage guidelines

Timing

As a general rule, your animation is going to feel slower to others than it does to you. Always err on the side of caution and make your animations happen faster than you think they should. We never want to sacrifice performance for the sake of a showy animation. Even if the animation is not negatively impacting performance, it should still feel fast and fluid and not give people any feeling of slowing down their workflows.

Feeling

Resonance is designed to provide a quiet, calm workspace where people can comfortably spend many hours. Our animations should enhance that feeling, without being overpowering. Resonance feels slightly quirky and optimistic, but never childish. Playfulness in animation shouldn’t be confused with fluff or decoration; when applied properly, animation does not draw attention to itself

Contextual

The different types of animation scenarios can broadly be categorized into three buckets: attention grabbing (such as errors), state change (such as hovers on a radio button), and spatial (such as sliding between screens). These contexts are not mutually exclusive—for example, a drawer opening and closing is attention grabbing and spatial.

Recommendations

• If a user repeatedly views the same animation, that animation should not be disorienting or needlessly distracting.
• Animation should reinforce the existing hierarchy on the page. Be intentional with what you are giving motion, and how much motion. Just like a primary button should be more attention-grabbing than a secondary button, a hover animation for a radio button shouldn’t be more noticeable than a notification.
• Animations should act as an additive bridge between the initial state of a component and subsequent states of that component.

Implementation guidelines

Good animations can be built poorly, and bad animations can be built well. These guidelines will help to ensure that you build good animations well.

Unobtrusive

• An external application shouldn't need to sequence its operations around visual enhancements. The application should always operate in a manner optimized to its own behaviors. Resonance animations should simply apply a layer of visual enhancement onto the core UI.
• If you're animating an element, don't harm the interactivity or binding like destroying and recreating it for the sake of animation alone. Animation is an invisible top-level feature.
• When keeping interactive elements on screen longer than an application is using them, Resonance should handle blocking interactivity to these elements during an animation sequence to prevent repeated user input.

Encapsulated

• Keep all animation-related complexity contained within the Resonance repo where it can be shared across all Chorus applications.
• Resonance should handle binding all animation event listeners, and then cleaning them back up when finished.

Performant

• Resonance animations should be optimized to the capabilities of a web browser, and should take care to implement efficient motion patterns that provide a smooth and consistent UI experience.
• Prefer animating GPU-optimized CSS properties like transform and opacity. Avoid animating layout properties (like left, right, top, bottom, and/or margins) that will trigger document reflows when changed.