Entrance Patterns

Patterns for elements entering the viewport.

Core Principle

Elements entering should use:

• Easing: emphasized-decelerate (0.05, 0.7, 0.1, 1)
• Duration: Based on element size (short-3 to medium-2)

Basic Entrance

Fade In

.fade-in {
  animation: fadeIn 250ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}