Motion Lexicon
中文
Interactive entry

Squash & stretch

Squash & stretch helps turn motion judgment into actionable design engineering rules.

Entrances & exitsSequencing & timingMovement & transformsState transitions
ready
Active entry

Preview, parameters, and exports

Squash & stretch helps turn motion judgment into actionable design engineering rules.

Deforming an element as it moves to convey weight, speed, and flexibility

Browse categories
Preview
Squash & stretch
420ms
28px
0ms
soft
.motion-card {
  animation-name: motion-squash-and-stretch;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-squash-and-stretch {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-squash-and-stretch-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-squash-and-stretch-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Squash & stretch for a UI fragment: Squash & stretch helps turn motion judgment into actionable design engineering rules. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 0ms delay, use soft easing (cubic-bezier(0.23, 1, 0.32, 1)), and include a reduced-motion fallback.

intent: entrancefeel: softcontext: card
Usage
  • Use Squash & stretch while reviewing motion risk.
  • Align designers, engineers, or agents around implementation standards.
  • Turn abstract motion principles into executable checks.
Examples
  • Use Squash & stretch to evaluate whether a motion pattern affects comprehension, performance, or comfort.
  • Turn Squash & stretch into an explicit review criterion during critique.
Review notes
  • Use Squash & stretch as review language instead of relying on vague taste.
  • Check whether it serves orientation, feedback, continuity, performance, or comfort.
  • If it adds friction to high-frequency work, reduce or remove the related motion.
Reduced motion

Under reduced motion, the Squash & stretch page keeps the static diagram and text relationships.