Loading pattern...

What is Scale Animation?

Scale Animations grow (scale up) or shrink (scale down) elements from a specific origin point. Creates zoom-like effect. Often combined with fade for rich entrance/exit. Common for modals, popovers, dropdown menus. Origin point matters—scale from button for dropdowns, from center for modals.

When Should You Use This?

Use scale for elements that appear from a trigger: dropdowns (scale from button), popovers, context menus, modals (scale from center). Start small (scale(0.95) or 0.9), end at normal (scale(1)). Combine with fade. Duration: 200-300ms. Set transform-origin to anchor point (top-left for dropdowns from buttons). Don't scale large page transitions.

Common Mistakes to Avoid

  • Wrong origin—scale-from-center for dropdowns looks weird; set origin to button
  • Too dramatic—scale from 0.5 to 1 is jarring; use 0.9-0.95 for subtle effect
  • Scaling large areas—don't scale entire pages; feels zoomy and nauseating
  • Not combining with fade—pure scale can look abrupt; add fade for smoothness
  • Scaling width/height—use transform: scale(), not width/height (better performance)

Real-World Examples

  • Dropdown menus—scale from button origin with fade
  • macOS—window minimize/maximize with scale animation
  • Linear—modal dialogs scale from center with backdrop fade
  • Context menus—scale from click position

Category

Motion Animation

Tags

scale-animationzoomgrow-shrinktransform-scaleui-animation

Permalink