← Design & brand

Micro 100 200ms

Designs quick 100 to 200 millisecond interface animations like tooltips and dropdowns.

/micro-100-200msdylantarre/animation-principles

More in Design & brand

  • 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.
  • Medium 300 500msGuides animations of 300 to 500ms, such as page transitions and major UI changes.
  • 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,.
  • Orchestrated SequencesChoreographs staggered, multi-element animation sequences.