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.