Motion and interaction #

This page is for theme designers who add movement and behavior to a theme: transitions, menus that open, accordions, sliders. Motion helps when it explains a change, and harms when it decorates: it slows people down, distracts, and can make some visitors ill. The accessibility rules are in Reduced motion and Keyboard and focus; how scripts reach a theme in Loading JavaScript. This page is about specifying motion and interaction well.

Contents #

1. What motion is for
2. Durations and easing as tokens
3. Reduced motion
4. Carousels and sliders
5. Disclosures, menus and dialogs
6. How interaction reaches the theme
7. Specifying motion in a handoff

What motion is for #

Use motion to:

• show where something came from or went (a menu sliding from its button);
• confirm an action (a short highlight after saving);
• connect two states (an accordion opening).

Do not use it to decorate scrolling, to animate content into view as the page is read, or to make a page "feel alive". Content sites are read; motion that competes with reading costs more than it gives.

Durations and easing as tokens #

Keep two or three durations and one or two easing curves, and make them tokens like the other values (Design tokens):

:root {
  --site-duration-fast: 120ms;   /* hover, focus, small fades */
  --site-duration-base: 200ms;   /* menus, accordions */
  --site-ease: cubic-bezier(0.2, 0, 0, 1);
}

Short is better: interface transitions above about 300 ms feel slow when repeated. Motion tokens are the same in light and dark.

Reduced motion #

Visitors can ask their system for less motion. The designer help's pattern writes motion only inside @media (prefers-reduced-motion: no-preference), so it is opt-in (Reduced motion). For every animation you design, also design the reduced version: usually an instant change, or a fade instead of a movement. Opening a menu still works; it just does not slide.

Carousels and sliders #

Block types such as slider and carousel exist in the layouts editor, so editors will use them (Block definitions). If your theme styles them:

• no automatic rotation, or a visible pause control and a stop on hover and focus;
• previous and next controls that are real buttons, reachable with the keyboard;
• an indication of position ("2 of 5");
• every slide readable without the motion; the first slide carries the most important content, because many visitors never see the others;
• a design for one slide only, where the controls disappear.

Often a grid view type of the same block serves visitors better; offer it next to the slider (Designing layout blocks).

Disclosures, menus and dialogs #

• Disclosures (accordions, "show more"): the trigger is a button that says whether it is open; content opens below it. The native details and summary elements give this with no script.
• Menus: open on click or Enter, close with Escape and on focus leaving; hover-only menus fail on touch screens and for keyboards (Designing navigation and menus).
• Dialogs: use sparingly; focus moves into the dialog and returns to the trigger afterward. The native dialog element handles much of this.

Design the open and closed state of each, and the focus position after opening and closing.

How interaction reaches the theme #

Behavior is written in JavaScript files of the design, listed in the design's script settings or required from a template, and packed by ezjscore. Templates carry no inline scripts and no on*= attributes, so a strict Content Security Policy can be used (No inline JavaScript, CSP-safe design). Where jQuery is used, it is the version ezjscore ships (jQuery in designs). Scripts toggle classes and ARIA attributes; the stylesheet draws the states from them (Designing interactive states).

Specifying motion in a handoff #

For each animated element, write one line:

A short screen recording of a prototype helps, but the table is what the developer builds from.

Related pages #

• Reduced motion
• Loading JavaScript
• Designing for performance budgets
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.