Animations

Set the site-wide feel of motion: how sections reveal on scroll, how cards react on hover, and the switches that turn it all off.

Under Settings → Theme → Animations you set the personality of motion for the whole storefront. Individual blocks choose whether and how they animate in their own Motion group; this panel decides the defaults they inherit.

📷 Screenshot: The Animations panel with Reveal Duration, Reveal Easing, Reveal Distance, Hover Lift and Hover Scale filled in.

Transitions

These govern every small state change — buttons, links, inputs, cards changing color or shadow.

  • Transition Duration — default 200ms. Lower feels snappier; above 300ms starts to feel sluggish on buttons.
  • Transition Easing — the curve those changes follow. Ease Out (Default) is right for almost everything.

Scroll reveal

The defaults every block’s Scroll Animation uses unless the block overrides them with its own Speed or Travel Distance.

  • Reveal Duration — default 0.6s. How long a section takes to arrive. 0.4s is brisk, 1s is cinematic.
  • Reveal Easing — Expo Out (Default) does most of the movement early and settles gently. Spring overshoots slightly for a playful feel. Standard is Material’s curve. Linear is mechanical and rarely what you want.
  • Reveal Distance — default 24px. How far Fade Up / Fade Down / Slide In / Flip Up travel. 12px is subtle, 48px is bold.

Hover

Cards, tiles, feature boxes and logos across the site share one hover language.

  • Hover Lift — default 4px. How much a card rises on mouseover. 0px turns lifting off everywhere.
  • Hover Scale — default 1.05. How much images inside cards zoom on mouseover. 1 turns zooming off.

💡 Tip: A premium, restrained feel is 0.5s reveal, 12px distance, 2px lift, 1.03 scale. A bold, energetic feel is 0.8s, 48px, 6px, 1.08.

Switches

  • Enable Animations — off means no scroll reveals and no hover lift or zoom anywhere on the site. Transitions on buttons and inputs stay, so the site still feels responsive.
  • Reduce Motion — the accessibility setting. On, it does everything above and collapses every transition and animation to instant, and turns off smooth scrolling. Visitors whose device has Reduce Motion turned on get this automatically regardless of the switch.

ℹ️ Note: None of this affects search engines. Every page is delivered fully visible; reveals only run in the visitor’s browser after the page has loaded.

Next: Per-block overrides.

← PreviousCustom CSS & fontsNext →Per-block overrides