Motion, effects and controls
Understand motion priority, hover behavior, background blur, parallax, colors, and spacing.
These answers explain which control wins when several Strata appearance and motion settings affect the same surface.
Which motion preference wins?
Either Theme settings > Animation > Reduce animation or the visitor's operating-system reduced-motion preference can suppress or simplify decorative movement. A local autoplay, parallax, reveal, drawer, or Header setting does not override that preference.
Treat the static presentation as part of the feature, not as an error state. Content, links, and playback controls should remain usable when decorative motion is removed.
Why is a hover effect missing on touch?
Appearance and spacing provides the shared Button style and supported button/link hover treatments. Hover effects are intended for devices with a fine pointer and a real hover state. Touch interaction keeps the control's usable static appearance.
Reduced-motion preferences can also remove the moving part of effects such as a sliding label or light sweep. A section-level secondary or text-link style can retain its own treatment even when the global primary Button style is changed.
How do Button style and Hover effect combine?
Global Button style chooses Fill or Outline for supported primary actions. Outline does not turn every control into an outline: secondary actions remain filled, while tertiary, icon-only, dynamic checkout, app, disabled, and busy controls keep their own contract.
The separate button Hover effect chooses None, Slide up, or Color invert. It changes the supported pointer-hover treatment rather than the action's semantic priority. Touch, reduced-motion, disabled, and busy paths retain a readable static state. See Appearance and spacing for the exact labels and defaults.
Why does a link still underline on keyboard or touch?
Light sweep is a fine-pointer hover effect on supported theme links. Keyboard focus must keep a visible indicator, and touch or reduced-motion paths keep the normal readable link treatment instead of depending on a moving sweep. An underline in those states is an accessibility fallback, not evidence that the global link setting was ignored.
What does Enable background blur affect?
Enable background blur enhances supported layered surfaces, including transparent or sticky Headers, Header menus, shared Cart/Search/Collection Filters drawers, the optional Footer Reveal transition layer, and Auto-scroll gallery edges. It does not make every surface translucent.
Two distinctions are useful:
- Footer Reveal does not require background blur to run. Blur enhances its transition when the browser supports that treatment.
- Auto-scroll gallery uses local Enable edge blur to control its edge fade and blur eligibility. The fade can remain without global blur; the extra backdrop-blur treatment is conditional on the global setting.
If blur is unavailable or disabled, evaluate the fallback background and text contrast rather than expecting the feature itself to disappear.
Why is parallax still static?
Parallax requires both the global Enable parallax effects control and the current section's Enable parallax control. The section also needs suitable media. Reduced-motion preferences take priority and keep the media static.
Use Animation for the master setting and the relevant section guide, such as Parallax grid, Collection banner, or Video, for the local control.
Do section colors replace the global palette?
An unassigned section Background color or Text color inherits the appropriate global General color. Selecting a section color overrides that inherited value for the section. This lets the global palette establish the default while a specific editorial section creates a deliberate contrast.
See Colors for the shared palette. Then use the section's canonical guide to confirm which local color fields it exposes.
How do global and section spacing work together?
The global Vertical space between sections establishes the overall spacing rhythm. A section's Section spacing chooses its local size, while Top spacing and Bottom spacing decide which edges receive it.
Removing both local edges deliberately joins the section to its neighbours. Preview that choice with the adjacent sections rather than judging the section in isolation. See Appearance and spacing for the global control.
If the result differs
Check reduced-motion and touch conditions before treating a missing animation as a defect. For a persistent visual issue, record the setting combination, surface, device class, and browser in Troubleshooting.