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 duration | 200ms | 0–500 ms |
| Motion easing | Cubic curve (custom) | linear / ease / cubic-spring / cubic curve |
| Hover scale | 102 (1.02×) | 100–110 |
| Card shadow on hover | Off | On / off |
What's affected
- Hover effects on product cards, buttons, links
- Drawer / modal slide-in transitions
- Cart drawer slide
- Filter sheet open/close
- Image zoom on card hover
- Search overlay reveal
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, except for a few performance-critical animations (lightbox zoom, slideshow) that use their own fixed timing for stability.
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 prefers-reduced-motion: reduce browser setting. Customers with that preference enabled in their OS see all animations disabled automatically — including pulse animations on stock alerts and badge pulses. You don't need to do anything.
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.