Motion Lexicon
中文
Interactive entry

Layout thrashing

Layout thrashing helps help diagnose stutter and choose more stable implementations.

Entrances & exitsSequencing & timingMovement & transformsState transitions
ready
Active entry

Preview, parameters, and exports

Layout thrashing helps help diagnose stutter and choose more stable implementations.

Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank

Browse categories
Preview
Layout thrashing
420ms
28px
0ms
soft
.motion-card {
  animation-name: motion-layout-thrashing;
  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-layout-thrashing {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

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

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

@keyframes motion-layout-thrashing-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Layout thrashing for a UI fragment: Layout thrashing helps help diagnose stutter and choose more stable implementations. 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 Layout thrashing while reviewing motion risk.
  • Align designers, engineers, or agents around implementation standards.
  • Turn abstract motion principles into executable checks.
Examples
  • Use Layout thrashing to evaluate whether a motion pattern affects comprehension, performance, or comfort.
  • Turn Layout thrashing into an explicit review criterion during critique.
Review notes
  • Use Layout thrashing 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 Layout thrashing page keeps the static diagram and text relationships.