home / skills / dylantarre / animation-principles / entrance-animations
This skill guides seamless entrance animations using Disney principles to make elements appear engagingly on load, modals, and reveals.
npx playbooks add skill dylantarre/animation-principles --skill entrance-animationsReview the files below or copy the command above to add this skill to your agents.
---
name: entrance-animations
description: Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.
---
# 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
```css
.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);
}
}
```
## Stagger Formula
For multiple items: `delay = index * 50ms`, cap at 500ms total sequence time.
Never exceed 5 items in a stagger sequence without user-initiated action.
This skill applies Disney’s 12 principles of animation to entrance effects so UI elements feel natural, readable, and delightful when they come into view. It gives practical rules for timing, easing, staging, and motion so toasts, modals, cards, lists, and hero content enter the screen with purpose and polish.
The skill inspects the intended context (toast, modal, list item, hero, etc.) and recommends a tailored entrance pattern: start and end states, duration, easing, stagger, and small transforms (translate, scale, opacity). It emphasizes pose-to-pose definitions, child-element lag, curved motion, and combined scale+fade to create depth and appeal.
How do I choose durations for different elements?
Use the provided timing bands: quick 150–200ms for small transient elements, standard 200–300ms for modals and cards, dramatic 300–500ms for hero or page transitions.
When should I stagger items versus animate all at once?
Stagger when multiple sibling elements appear in sequence to guide the eye; use 50–100ms step and limit visible sequence to about 5 items unless triggered by explicit user action.