motion

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Motion purpose: enhance understanding and context

Motion has a clear purpose and should help merchants understand the interface and the results of their actions, rather than being used as decoration or entertainment. Motion should enhance merchant understanding and provide context.

Motion pitfall: avoid complicating the interface

Motion should not complicate the interface or hinder merchant comprehension. Elaborate transitions that animate all elements that change on the page should be avoided.

Motion should be responsive to merchant interactions

Motion should be a reaction to merchant interactions, providing immediate visual feedback and making the interface feel alive and responsive. The scale of the motion should match the scale of the action performed.

Motion pitfall: avoid motion that doesn't match user expectations

Motion should not be used in ways that don't correspond to merchants' interactions and expectations. Elaborate animations that don't relate to the user action should be avoided.

Motion should feel snappy: quick and subtle

Motion should feel quick and subtle. A snappy animation starts rapidly and slows down towards the end, making the transition feel quick while still providing a cue as to where things are coming from, making the motion feel more natural.

Motion pitfall: avoid abrupt or instant transitions

Motion should not be abrupt, instant, or distracting, as these make it hard for merchants to follow along with changes happening on the interface. Instant transitions without animation should be avoided.

Motion in Pro design language interactions

Primary interaction points provide a dramatic visual response to interaction. Variables like position and lighting change to mimic how physical buttons react when pressed. Hover transitions are smooth and unobtrusive, while feedback from a click feels more dramatic and visceral. Interactions are quick with instant feedback that feels almost life-like. Transitions are seamless to create an intuitive navigation experience.

Animation details in Pro design language

Detailed interactions, such as animating a checkbox when it is ticked, create a sense of familiarity and reference how merchants interact with real-world objects. These animations contribute to making the admin interface feel dynamic and alive, while making merchants feel more comfortable and confident in their interactions.

Legacy motion custom properties disallowed

The stylelint rule motion/custom-property-disallowed-list disallows use of legacy motion custom properties. Legacy properties like var(--p-duration-500) and var(--p-ease) should not be used. Instead, use the current motion custom properties: var(--p-motion-duration-500) and var(--p-motion-ease).

Motion custom property naming convention

Current motion custom properties use the prefix --p-motion- followed by the property type. For example, use var(--p-motion-duration-500) for duration values and var(--p-motion-ease) for easing functions.

motion/function-disallowed-list stylelint rule

The motion/function-disallowed-list stylelint rule disallows use of legacy Sass motion functions. Developers should use design token variables like var(--p-motion-duration-200) instead of hardcoded values like 200ms for transition-duration.

Give your agent this brain