Master Squash & Stretch for Elastic Micro-Interactions

Disney's first animation principle, squash and stretch, makes motion feel alive by deforming objects realistically—flatten on impact, elongate on rebound. For web devs, apply it subtly (25-50% deformation) to SVG icons instead of balls. On hover, stretch arrow shafts (e.g., change path h 14 to h 17) while squeezing tips inward (e.g., adjust l 7,7 to pull closer), creating a thinner, rubbery pull. This beats simple scaling: side-by-side tests show stretched versions feel 2x more engaging and natural, as deformation sells elasticity without exaggeration.

Preserve readability by formatting multi-line path() overrides with backslash escapes in CSS, e.g. path("M 5,12 \ h 17"). Always respect prefers-reduced-motion to disable for sensitive users.

Cross-Browser Implementation: CSS vs JS Libraries

Native CSS path() transitions interpolate d attributes smoothly but lack Safari support (79% global coverage as of 2026), forcing single-line paths or escapes. Target cosmetic effects? Ship it. For full reach, use Motion library's animate(): pass [{ d: 'M 5,12 h 17' }, { d: 'original' }], leveraging Web Animations API for 60fps even under load. Motion (ex-Framer Motion) handles frame-by-frame JS calc efficiently, works vanilla JS/React/Vue.

Start with Lucide icons like arrow-right (two paths: shaft h 14, tip M12,5 l7,7 l-7,7). Hover triggers shaft growth + tip squeeze for authentic stretch.

Polish with Springs and Event Triggers for Standout Playfulness

Swap Bézier easing for spring physics (e.g., Motion spring({ stiffness: 300, damping: 30 })) to mimic real elasticity—snappier rebounds make squash/stretch feel rubbery and organic. Avoid state-based hovers (stretched while hovering); use event-based "boops": trigger brief stretch on hover-start, snap back instantly. This surprises users (vs ubiquitous state hovers), boosts delight, and cuts cognitive load on long hovers/touch.

Full polished code integrates springs + boop: Motion animate(pathEls, stretchPaths, { type: 'spring', ... }, onComplete: snapBack). Outcome: icons pop playfully, elevating UIs without JS bloat. Experiment in playgrounds for balls (scaleY 0.5 squash, 1.2 stretch) but prioritize icons for production polish.