Responsive & Adaptive Timing
Responsive timing adapts duration to context: device capability, travel distance, user preferences, and interaction type. One duration doesn't fit all situations.
Disney Principles for Adaptive Motion
Context-Aware Application
Squash & Stretch: Scale with device - more subtle on mobile (less screen real estate for deformation).
Anticipation: Shorter on touch devices - touch users expect faster response than mouse users.
Staging: Adapt to viewport - smaller screens need more focused staging, less simultaneous motion.
Straight Ahead/Pose to Pose: Same approach, scaled duration - poses stay, timing adjusts.
Follow Through: Proportional to distance - longer travel = more follow-through time.
Slow In/Slow Out: Adjust curve intensity - faster animations need sharper easing.
Arcs: Same paths, different speeds - arc shape remains, traversal time changes.
Secondary Action: Reduce on mobile - fewer simultaneous animations for performance.
Timing: THE adaptive variable - timing changes, principles stay.
Exaggeration: Less on smaller screens - proportional to viewport/element size.
Solid Drawing: Performance-aware - reduce 3D transforms on weaker devices.
Appeal: Context-appropriate - what feels right on desktop may feel slow on mobile.
Adaptive Strategies
Distance-Based Duration
/* Base duration for reference distance */
--base-duration: 300ms;
--base-distance: 100px;
/* Duration scales with distance */
/* 50px travel = 200ms, 200px travel = 450ms */function getDuration(distance) {
const baseDuration = 300;
const baseDistance = 100;
return Math.min(600, baseDuration * Math.sqrt(distance / baseDistance));
}Device-Based Duration
/* Desktop - full duration */
.transition { transition-duration: 400ms; }
/* Tablet - slightly faster */
@media (max-width: 1024px) {
.transition { transition-duration: 350ms; }
}
/* Mobile - faster for perceived responsiveness */
@media (max-width: 768px) {
.transition { transition-duration: 250ms; }
}Preference-Based Duration
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.transition {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* Reduce motion, don't eliminate */
@media (prefers-reduced-motion: reduce) {
.transition {
transition-duration: 100ms;
transform: none; /* Only opacity fades */
}
}Context Rules
| Context | Duration Adjustment |
|---|---|
| Touch device | -25% from desktop |
| Small viewport | -20% from desktop |
| Large travel distance | +50% base |
| Small travel distance | -30% base |
| User prefers reduced | Instant or minimal |
| Low power mode | -50% or disabled |
| High-frequency action | Use minimum duration |
| First-time view | Full duration |
| Repeat interaction | Reduced duration |
Implementation Pattern
:root {
--duration-instant: 50ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
}
@media (max-width: 768px) {
:root {
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 350ms;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 0ms;
--duration-fast: 0ms;
--duration-normal: 100ms;
--duration-slow: 150ms;
}
}Key Insight
Great animation adapts like typography adapts - what works at one size/context may not work at another. Build systems, not fixed values. Test across contexts. Duration is a variable, not a constant.