Motion

Overview

Motion brings UI to life and helps us to demonstrate cause and effect. It requires effort and thought to create a meaningful, well-designed experience.

At Octopus Deploy, we use motion to educate, improve time perception, and create emotional resonance. The diagram and table provide a high-level summary, and a more detailed explanation is below.

Education

Motion can guide users’ attention and teach conceptual connections.

The visual feedback helps users understand the cause-and-effect relationship between actions and system responses.

Time Perception

⁠Motion can improve perceived performance by reducing the user’s cognitive load. It does this by preserving continuity, and keeping transitions smooth and responsive.

For example, a Skeleton Screen does this by hinting at the final layout during initial load to set expectations and indicate progress rather than appearing broken or stalled.

As a result, motion can help reduce user uncertainty and increase user trust and satisfaction.

Emotional Resonance

Motion can be both functional and delightful:

• Functional motion is task-oriented and helps the user better understand the interface, which aligns with our first two reasons why we use motion: to educate and improve time perception.
• Delightful motion focuses on user emotions, entertaining the user, and incorporating a brand’s values into a product.

What delight means at Octopus

Delight at Octopus means helping our users achieve their goals easily and efficiently, without unnecessary distractions. We do this by correctly understanding their intent and focusing on the moments that matter most.

Thoughtfully crafted motion plays a part by delivering experiences that feel effortless and complete. The smallest movements can create emotional resonance, not because they’re flashy, but because they make our product feel truly helpful.

Delightful motion can:

• Elicit an emotive response by transforming ordinary tasks into moments of delight, such as a branded loader (see example below).
• Make interfaces feel alive and responsive, helping build trust and emotional connection.
• Create meaningful brand connection moments by showcasing the Octopus personality, making our brand more memorable to our users.
• Encourage celebration by reinforcing positive moments.

Other potential examples of delightful motion are:

• Subtle animation to celebrate a successful deployment (possibly randomized instead of every deployment so that it doesn’t become tiresome, and instead is a rare moment of delight, such as Asana’s unicorn.)
• Animated icon to support a pulsating new feature tag (see example below)

Use delight with caution

Delightful motion should never be used for critical or high-risk moments, because that will degrade the task’s severity or urgency and our customers will immediately lose trust in our product. Our customers trust us to support them during these moments.

Using motion for emotional resonance should be well-considered and used intentionally and sparingly to deliver the right impact.

 

---

Motion design principles

Motion design principles are our guide for using motion at Octopus Deploy.

When our customers use our product, no matter what page they are on, every aspect of the product’s visual language should feel unmistakably Octopus. Motion is one aspect of this visual language.

Applying these principles makes sure our animations work cohesively with one another and within our broader design system. Motion is used consistently, where every movement clearly belongs together.

Here are a few examples of our motion design principles in practice (note that some are illustrative and not yet implemented):

 

---

Duration

The duration of each individual movement normally depends on an element's size and the distance it travels.

Duration values range from 100ms to 1000ms.

Micro vs Macro

Motion can be categorized as a micro- or macro-animation. The table provides a high-level guide, and a more detailed explanation is below.

Micro-animations take up a small amount of visual space and generally use subtle movements. They can help draw attention to individual elements or provide feedback on actions.

• Examples include hover effects, tooltips, loading (such as a Spinner), and animated icons.
• Smaller elements with small changes generally move faster.
• Duration may also be influenced by the element’s purpose. For example, a Spinner and an Avatar’s hover transition both appear small, however a Spinner’s motion requires more time to communicate its intent of loading compared to a color change on hover.
• While visually small, keep in mind that the engineering effort is not necessarily small.

Macro-animations are more pronounced and take up more visual space to move large areas of the layout, such as a Drawer or a full page transition.

In terms of duration, large and complex elements generally look better when the animation lasts longer.

Delays

Delay tokens are defined separately from duration tokens because a delay between animations is often much shorter than their duration. The animation-delay property specifies a delay for the start of an animation.

Delay values will vary depending on the use case, but will typically range from 10ms–20ms. We want to avoid long delays to ensure a snappy UI (following our Responsive design principle).

Occasionally we may require a longer delay, such as displaying a Skeleton Screen to reduce the user’s cognitive load and minimize big jumps in the page layout while loading content.

 

---

Easing

Easing allows us to create natural-looking motion that mimics movement in the real world. It’s all based on physics – objects accelerate when they start to move, and decelerate when they stop.

We use standard cubic-bezier easing with the following types:

• Ease In Out
• Ease Out
• Ease In
• Linear

The diagram below compares two cubic-bezier graphs. The left graph has no easing applied (linear), while the right graph is set to ease-in-out.

Ease In Out

Best used for elements visible from beginning to end, such as those that change color, size, or position. The most common type of easing, ease-in-out uses an accelerate/decelerate curve, so it’s a good default to use when in doubt.

Ease Out

Best used for elements that start out of view and then enter the screen with movement, ease-out uses a decelerate curve.

Ease In

Best used for elements that start in view and then exit the screen with movement, ease-in uses an accelerate curve.

Linear

Use only for changing opacity. linear uses the same speed from start to finish and is not appropriate for movement as it appears unnatural to the human eye.

Animated representations of each easing type are sourced from Easing Wizard.

 

---

Types of motion

These are the basic building blocks for motion. They can be used alone, or combined to create more complex animations.

Enter and exit

Used to introduce and dismiss elements.

Transform

Allows elements to move and change.

 

---

CSS Transition vs Animation

Motion can be defined in CSS in two different ways:

• CSS transitions are generally best for simple from-to movements. They use the transition property to change property values smoothly over a given duration.
• CSS animations are for more complex series of movements. They use the animation property to let an element gradually change from one style to another.

Here's a brief overview of their differences:

 

---

Accessibility And Reduced Motion

Accessibility

Many types of animated effects are likely problematic for people with motion sensitivity. For some, motion can trigger physical reactions like seizures, migraines, nausea, and dizziness. It can also negatively affect cognition and concentration.

The following guidelines help us design motion that is safe for our audience and won’t cause unintended harm.

Minimize flashing

Flashing can cause seizures in those who are photosensitive. Avoid flashing colors and use appropriate transition patterns instead of instant jump cuts.

Avoid autoplay

Non-essential animations shouldn't play or loop for longer than five seconds without controls to pause, stop, or hide them. Avoid auto-scrolling carousels and auto-playing videos.

Other best practices

• Avoid bouncing animations
• Avoid animations that move an object across a large space, such as a full-screen wipe transition covering the entire screen. The physical screen size matters less than the size of the motion relative to the screen space available.
• Avoid horizontal scroll while users are scrolling vertically
• Avoid moving elements at different speeds, such as the parallax effect
• Make sure animations don't interfere with screen magnifiers

Reduced motion

Reduced motion involves removing all heavy motion effects from the product to accommodate users who suffer from motion sensitivity. The prefers-reduced-motion media query can be used to replace motion effects.

Larger movements

Large page transitions, or movements such as a Snackbar or Dialog sliding in, should be replaced with a simple 200 ms opacity fade.

Automatic scrolling

Smooth scrolling effects should be replaced with the default browser anchor link behaviour.

Non-essential animated illustrations

A non-essential animated brand illustration should be replaced with a static version.

 

---

Performance and loading times

One of the core reasons we use motion is because it can improve perceived performance, as mentioned above in Time Perception. Perceived performance refers to how fast or responsive a website or app feels compared to how fast or responsive it is, as reported by metrics.

However, the excessive use of animations or complex motion can potentially impact performance and loading times. It may lead to slower interactions and increased resource consumption, negatively affecting the overall user experience.

Spinning fans, hot battery, and a blank or unresponsive page are all hallmarks of the browser struggling to render a requested page. When things go awfully wrong like this, our brand perception, as well as our customers’ trust in our product, are already negatively impacted.

Ways to manage performance when using motion

• Use caution when using motion for actions that people perform most frequently. Users especially notice delays when performing routine, quick tasks.
• JavaScript is the most resource intensive asset; the less we use it, the more we limit potential speed and UX issues.
• Reduce and optimize script resources to prevent the signs of intensive processing and reduce the possibility of delays. We can use Interaction to Next Paint and Total Blocking Time to quantify and track these efforts.
• Minimize layout and repaints. Modern browsers can animate four things really cheaply: position, scale, rotation, and opacity.
• Use tools to identify animation performance issues.

 

---

Recommended reading

Other documentation that will help guide your thinking when working with this UI pattern.