What is Morph Animation?

Morph Animations smoothly transform one shape into another—icon to icon (hamburger to X), shape to shape, or element to element. Creates visual continuity and shows relationship between states. Common in icon toggles, loading states, logo animations. Requires SVG or complex CSS/JS. Use libraries like Flubber or GSAP.

When Should You Use This?

Use morph for icon state changes (hamburger ↔ X, play ↔ pause), loading animations (shapes morphing), logo animations, or emphasizing transformation. Shows continuous transition rather than replace. Duration: 300-500ms. Works best with SVG. Complex morphs need libraries. Reserve for hero interactions—morphing is expensive.

Common Mistakes to Avoid

• •Morphing unrelated shapes—hamburger to X works, but rectangle to circle feels random
• •Too complex—morphing shapes with many points can look glitchy; keep simple
• •No fallback—morph requires SVG/JS; provide static icon for unsupported browsers
• •Too slow—>500ms morphs feel sluggish; keep under 400ms
• •Overusing—morph is heavy; use for 1-2 hero interactions, not everything

Real-World Examples

• •Hamburger menu icons—morph to X when open
• •Play/pause buttons—smooth icon transformation
• •Loading spinners—morphing geometric shapes
• •Google Material Design—morph FAB to dialog on mobile