Exit Patterns

Patterns for elements leaving the viewport.

Core Principle

Elements exiting should use:

• Easing: emphasized-accelerate (0.3, 0, 0.8, 0.15)
• Duration: Shorter than entrance (short-3 to short-4)
• Faster than entrance — Don't make users wait

Basic Exit

Fade Out

.fade-out {
  animation: fadeOut 200ms cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
}