Squash, stretch & impact

A bouncing ball is one of the first things you learn to animate. A bouncing ball without squash and stretch is a geometric shape moving through space: correct, but lifeless. With squash and stretch, the ball compresses as it hits the ground and elongates as it launches upward. That deformation implies mass, and mass is what separates a living interface from a flat one.

#The idea

Squash & stretch is one of Disney's oldest animation principles (dating to the 1920s), and it's grounded in a simple observation: volume is conserved. When an object compresses in one axis, it expands in the other. A ball hitting the ground squashes vertically and stretches horizontally. The total volume stays roughly the same, but the shape distorts momentarily.

In UI, squash & stretch is how you imply impact, mass, and elasticity on a 2D element that has no physical volume. A button that squishes slightly on press reads as pressable: a physical affordance. A successful save confirmation that expands briefly before settling feels celebratory.

The key technical detail: squash and stretch should be opposite on the two axes. If you squash y by 20%, stretch x by a matching or slightly smaller amount (volume conservation is perceptual, not strict). If you scale uniformly (both axes the same), you get zoom, not deformation: a different principle entirely.

#When it applies

• Playful UI: games, consumer apps, onboarding, celebratory moments. Duolingo and Headspace lean heavily on squash & stretch.
• Feedback on tap/click: a subtle squish on press makes controls feel physical. Apple's hover-hint on iPadOS cursor does this beautifully.
• Impact moments: a card landing on a grid, a modal settling open. The squash at the moment of landing sells the weight.
• Character-forward brands: Mailchimp, Slack emoji, Linear's occasional flourishes.

#When it doesn't

• Serious or data-heavy UI: IDEs, spreadsheets, dashboards. Squash on a dropdown menu reads as toylike.
• Text: never squash text. It becomes illegible, and typography has its own principles of weight that don't map to 2D physics.
• Subtle enterprise design languages: squash & stretch reads as character, and some products actively avoid character.

#Implementation

Animate scaleX and scaleY inversely to conserve apparent volume:

<motion.div
  animate={
    isTapped
      ? { scaleX: [1, 1.15, 1], scaleY: [1, 0.85, 1] }  // squash on tap
      : { scaleX: 1, scaleY: 1 }
  }
  transition={{ duration: 0.3, ease: "easeOut" }}
/>

A launch motion: stretch on takeoff, squash on landing:

<motion.div
  animate={{
    y: [0, -50, 0],
    scaleY: [1, 1.2, 0.8, 1],
    scaleX: [1, 0.9, 1.1, 1],
  }}
  transition={{
    duration: 0.6,
    times: [0, 0.3, 0.7, 1],
  }}
/>

#Craft notes

• Deform by 5-15% for UI, 20-40% for playful/character moments. More than that and you cross into animation territory, not interface.
• The deform should happen at the moment of impact or transition, not during the main motion. A ball flying through the air doesn't squash mid-flight; it squashes on contact.
• Inverse axes matter. Scaling both axes the same is zoom. Scaling them oppositely is squash. Uniform scaling doesn't imply physical deformation.
• Pair with anticipation and follow-through for a complete physical motion. Wind up (anticipation), release (main motion), impact (squash), settle (overshoot). All four principles working together is what the best game UIs use.

#Exercises

1. Add squash to a button. Take any button in your project. Add a subtle scaleX: 1.05, scaleY: 0.95 on active. Is the feel improved? At what deform amount does it start to feel childish?
2. Recreate the bouncing ball. Using Motion, animate a circle bouncing with proper squash & stretch. Compare side-by-side with the same animation using uniform scale (or no scale). The difference is the entire principle.
3. Find a rejection. Find a serious-feeling UI (Linear, Notion, Figma) and identify places where squash & stretch is deliberately avoided. The absence is the design choice.

#Study this in the wild

• Duolingo's streak flame. Heavy squash & stretch. The flame breathes. Pure character.
• iPadOS cursor. Subtle deform as it hits hoverable elements. Near-invisible, but your hand feels it.
• Slack's message reactions. Quick squash on emoji tap. Celebration without becoming toylike.

#Further reading

• Raphael Salaja: Squash and stretch in UI.
• Disney: The Illusion of Life.