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