Motion
Hover and transition speed, easing curve, and the hover-lift toggle.
Updated 2026-05-09
Theme settings → Style → Motion.
Settings
| Setting | Default | Range / options |
|---|---|---|
Motion enabled (motion_enabled) | On | On / off — global kill switch |
Motion duration (motion_duration) | 200ms | 80–600 ms |
| Motion easing | Cubic curve (custom) | linear / ease / cubic-spring / cubic curve |
Hover scale (motion_hover_scale) | 102 (1.02×) | 100–110 |
Card shadow on hover (shadow_hover_enabled) | Off | On / off — see Buttons & shadows |
Motion enabled toggle
motion_enabled: false flips the global --motion-duration token to 0ms, so every transition that reads it resolves to "instant" — site-wide, no per-section change required. Use this for a fully static feel.
What's affected
Every animation in Dost reads var(--motion-duration) and var(--ease). That means a single setting change ripples through:
- PDP gallery slide / fade transitions
- Image fade-in on load (including async-injected cards in recently-viewed, recommendations, search results, quick view)
- Cart drawer slide
- Quick view modal
- Search overlay reveal
- Dropdown menus / mega menu reveal
- Filter sheet open/close
- Hover effects on product cards, buttons, links
A few performance-critical animations (lightbox pinch-zoom, slideshow auto-advance) use their own fixed timing for stability.
How they combine
Most CSS transitions in Dost reference var(--ease) which resolves to var(--motion-duration) var(--motion-ease). Changing duration or easing once propagates everywhere.
Cubic-spring vs cubic curve
- cubic-spring (
cubic-bezier(0.34, 1.56, 0.64, 1)) overshoots slightly — feels playful, modern (Apple-style) - cubic curve (default,
cubic-bezier(0.2, 0.8, 0.2, 1)) — calm, editorial
For fashion / luxury stores, cubic curve is usually the right call. Spring suits energetic, youth-driven brands.
Reduced motion
Dost respects the OS-level prefers-reduced-motion: reduce preference. Customers with that setting enabled see all animations disabled automatically — including pulse animations on stock alerts and badge pulses. You don't need to do anything.
The in-theme motion_enabled = false toggle is independent of the OS preference and takes precedence — turn it off and animations are killed regardless of what the visitor's system says.
Tips
- Slow networks benefit from shorter durations. 150ms feels snappy; 250ms feels deliberate. Avoid 400ms+ — it makes the site feel laggy.
- If your audience is mobile-heavy and accessibility matters, set duration to 150ms and easing to ease.