← Design & brand

Medium 300 500ms

Guides animations of 300 to 500ms, such as page transitions and major UI changes.

/medium-300-500msdylantarre/animation-principles

More in Design & brand

  • Implementation DebuggingAnimation doesn't work as expected, has bugs, or behaves inconsistently.
  • Joy DelightAdds animations that make interfaces feel happy and surprising.
  • Large 500 800msDesigns larger 500-800ms animations such as hero transitions and story-telling reveals.
  • Media PublishingDesigning animations for news sites, content platforms, publishing apps, or media.
  • Micro 100 200msDesigns quick 100 to 200 millisecond interface animations like tooltips and dropdowns.
  • Mobile TouchDesigns iOS/Android gestures and touch interactions.
  • Motion SicknessIdentify and fix animations causing discomfort.
  • Naturalistic MotionAnimation should feel organic and lifelike—creature animation, realistic characters,.