Motion
Motion helps bring ActiveCampaign to life and aids the user in navigating complex userflows, making their experience more intuitive and delightful.
Using motion
Motion in ActiveCampaign is designed to bring dynamism to its interface by enhancing a user’s understanding of the product through means of offering visual feedback and reducing cognitive load. Motion plays an important role in the perceived intuitiveness of our product, and helps build trust through predictable experiences that are consistent throughout.
✅ DO
- Use when attracting the user’s attention, such as drawing attention to toast notifications or the appearance of a tooltip * Provide transitions for smoother continuity between states of a flow, such as sliding open a drawer or using animation to reveal a Fullscreen Takeover * Add transitions for microinteractions of a single element, such as button hover states or an accordion panel opening * Use when the system is processing actions, such as a spinning loading indicator or animated loading gradient to reduce perceived wait times
🚫 DON’T
- Don’t use when adding motion wastes the user’s time or exists solely to entertain instead of helping accomplish their job to be done * Don’t use when adding motion complicates the user interface or hinders a user’s comprehension of what to do next
Motion best practices
Keep the user in control
Motion should never get in the way of the user’s experience, but they should always have the option to reduce or turn off motion entirely, either at the source or in Settings. Motion should be added with purpose and be predictable in its appearance, and not run the risk of being jarring, flashing, or an endless loop without the ability to pause or stop.
Use motion consistently across the product
Keeping patterns consistent in motion offers clear orientation and builds trust in our product through predictability. Motion is designed with our user’s goals in mind, choreographed to help maintain focus without being intrusive, distracting, or competing for attention. When adding motion, look first to reference patterns that already exist.
Apply motion with intention
Use motion to provide feedback, highlight changes, simplify interactions, guide attention, maintain flow, and inform the user. If it doesn’t help the user understand what has happened, what’s currently happening, or what they can expect next, the motion is unnecessary to add to the experience.
Duration and timing
Duration
Duration is determined by the size of the motion and the distance in which it travels. The larger this change in distance in or scale of motion is, the longer the animation takes and larger the duration value will be.
| Token | Usage | Value |
|---|---|---|
duration-1 | Perceived as instant. Used for selection controls like selecting checkboxes, radio buttons, or toggles. | 120ms |
duration-2 | Perceived as fast. Used for hover or fading effects such as the appearance of a toast or transition of a button state. | 200ms |
duration-3 | Perceived as normal. Used for opening new content, such as opening a drawer or Fullscreen Takeover. | 300ms |
Timing
Timing tokens are based on motion found in the real world and reflect users expectations with objects they might encounter in their everyday lives. Timing is based on easing, in which elements on the screen accelerate in the beginning and decelerate as they stop. Linear motion, without easing, can sometimes look unnatural since it doesn’t reflect how objects move in the real world.
| Token | Usage | Value |
|---|---|---|
timing-ease | This is the most common timing, also known as ease-in-out. This timing is considered a safe bet if you’re not sure which to use, as it has a slow start, a faster middle, and a slower end. This is the best timing to use when a user may not expect motion to occur or when the duration is 300ms or over, and most appropriate for elements that are changing size or positions. | cubic-bezier(0.4, 0.12, 0.4, 1) |
timing-ease-out | This timing has an ease-out effect that starts quickly and slows gradually and smoothly to a stop. This timing is ideal for interactions where users expect an immediate reaction, like clicking to open an accordion or opening a new element from out of view into view, such as a drawer. | cubic-bezier(0.15, 0.6, 0.6, 1) |
timing-ease-in | This timing has an ease-in effect that starts slowly and gradually gets faster. This timing is ideal elements that are exiting the page and get faster as they depart from view, such as a closing Fullscreen Takeover or closing modal. | cubic-bezier(0.25, 0, 1, 0.95) |
timing-linear | Transition that is consistent from start to end. Should be used sparingly as it can look unnatural compared to motion that uses easing. Best used for non-moving properties like changes in opacity. | cubic-bezier(0, 0, 1, 1) |