entrance-animations

Entrance Animations

Apply Disney's 12 principles when bringing elements into view.

Principle Application

Squash & Stretch: Scale from 95% to 100% on entry. Elements feel elastic, not rigid.

Anticipation: Start slightly below/smaller than final position. A -10px offset before sliding up creates expectation.

Staging: Enter from the direction of user attention. New list items from the top, modals from center, sidebars from their edge.

Straight Ahead vs Pose-to-Pose: Use pose-to-pose. Define clear start state (invisible, offset) and end state (visible, positioned).

Follow Through & Overlapping: Child elements should lag slightly. Container enters first, content 50-100ms after.

Slow In/Slow Out: Use ease-out for entrances. Fast start, gentle landing: cubic-bezier(0, 0, 0.2, 1).

Arcs: Combine Y and X movement. Don't just fade - slide in on a subtle curve.

Secondary Action: Pair fade with scale. Opacity 0→1 while scaling 0.95→1 adds depth.

Timing:

• Quick entrances: 150-200ms (toasts, tooltips)
• Standard entrances: 200-300ms (modals, cards)
• Dramatic reveals: 300-500ms (hero sections, page transitions)

Exaggeration: Scale can start at 0.8 for dramatic effect, 0.95 for subtle polish.

Solid Drawing: Maintain consistent 3D space. Elements entering from "behind" should scale up; from sides should slide.

Appeal: Entrances should feel welcoming. Avoid jarring pops - everything deserves an introduction.

Timing Recommendations

Element Type	Duration	Easing	Delay Pattern
Toast/Alert	150ms	ease-out	None
Modal	250ms	ease-out	Content +50ms
Card/Item	200ms	ease-out	None
List Items	200ms	ease-out	Stagger 50ms
Page Section	300ms	ease-out	Stagger 100ms
Hero Content	400ms	ease-out	Stagger 150ms

Implementation Pattern

.entering {
  animation: entrance 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}