GFX-301i · Module 2

Responsive Animation Adaptation

3 min read

Animations that work on desktop may not work on mobile — and the failure modes go beyond performance. A stagger reveal that looks elegant with 12 cards on desktop becomes tedious with 12 vertically stacked cards on mobile, each delayed by 50ms (600ms total delay before all content is visible). The user is waiting, not watching.

Responsive animation rules: reduce stagger counts at smaller breakpoints. Desktop: 12 items staggered by 50ms. Mobile: items appear in groups of 3, each group staggered by 50ms (150ms total delay — the user sees everything in under 200ms). Simplify transitions at smaller breakpoints. Desktop: glass panel hover with scale, border glow, and shadow. Mobile: simple opacity shift on tap — no hover state exists on touch devices. Reduce animation duration at smaller breakpoints. Desktop: page transitions at 400ms. Mobile: 200ms. Mobile users expect faster feedback because the device is in their hands — latency feels longer on a device you are physically holding.

The motion style specification (from GFX-301g) includes responsive overrides: mobile duration scale factor (0.7x), mobile stagger limit (max 3 groups), mobile easing (sharper curves for faster perceived response). The interaction pattern library includes mobile variants for every pattern that requires adaptation.

Do This

  • Scale animation duration down on mobile — 0.7x desktop values as a baseline
  • Group stagger items on mobile — max 3 groups, not individual element delays
  • Replace hover interactions with tap interactions — hover does not exist on touch devices

Avoid This

  • Use the same animation timing on mobile as desktop — 400ms feels slow at arm's length
  • Stagger 12 individual items on mobile — the delay is tedious, not elegant
  • Disable animations on mobile to "save performance" — reduce and adapt, do not remove