home / skills / dylantarre / animation-principles / medium-300-500ms
This skill helps you design and implement medium-duration animations (300-500ms) that communicate clearly and feel polished across interfaces.
npx playbooks add skill dylantarre/animation-principles --skill medium-300-500msReview the files below or copy the command above to add this skill to your agents.
---
name: medium-300-500ms
description: Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication
---
# Medium Animations (300-500ms)
The 300-500ms range is **standard animation territory**. Long enough to be watched, short enough to not impede flow. The workhorse duration for meaningful motion.
## Disney Principles at Medium Duration
### All 12 Principles Applicable
**Squash & Stretch**: Full expression - visible deformation for bouncing, elastic elements. 15-25% stretch feels natural.
**Anticipation**: Clear preparation - 80-120ms anticipation before main action. Pull back before push forward.
**Staging**: Multi-element choreography possible - primary action leads, supporting elements follow.
**Straight Ahead/Pose to Pose**: Pose to pose recommended - define key positions, let easing handle in-betweens.
**Follow Through**: Essential - overlapping action where parts settle at different rates.
**Slow In/Slow Out**: Critical for naturalism - both directions need proper easing.
**Arcs**: Natural motion paths - elements should travel on curves matching real physics.
**Secondary Action**: Multiple secondary actions - hair follows head, shadow follows object.
**Timing**: 18-30 frames at 60fps. Enough frames for nuanced motion.
**Exaggeration**: Full range available - match to brand personality and context.
**Solid Drawing**: Complex transforms work - 3D rotations, perspective shifts.
**Appeal**: Character-defining animations - this is where brand personality lives.
## Easing Recommendations
```css
/* Smooth, natural motion */
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
/* Expressive entrance */
transition: all 450ms cubic-bezier(0.16, 1, 0.3, 1);
/* Bouncy, playful */
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Dramatic deceleration */
transition: all 350ms cubic-bezier(0, 0.55, 0.45, 1);
```
## Best Use Cases
- Page/view transitions
- Complex modal sequences
- Animated illustrations
- Data visualization changes
- Onboarding animations
- Feature reveals
- State machine transitions
- Loading completion celebrations
## Implementation Pattern
```css
.page-enter {
opacity: 0;
transform: translateX(30px);
}
.page-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 350ms ease-out,
transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Staggered children */
.list-item {
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.list-item:nth-child(1) { transition-delay: 0ms; }
.list-item:nth-child(2) { transition-delay: 50ms; }
.list-item:nth-child(3) { transition-delay: 100ms; }
```
## Key Insight
Medium duration is where animation becomes **storytelling**. Users watch, understand, and remember these animations. Invest in polish here - it defines perceived quality.
This skill captures medium-duration animations (300–500ms) for UI and illustrations, balancing clarity and pace. It applies Disney’s 12 animation principles to create polished, meaningful motion for page transitions, modals, and feature reveals. Use these timings and easings when you want users to watch and remember the animation without losing flow.
The skill recommends durations between 300 and 500 milliseconds and pairs them with tailored easing curves for different expressive goals: smooth, expressive, bouncy, or dramatic. It prescribes key principles to apply—anticipation, slow in/slow out, follow through, arcs, and more—plus implementation patterns like pose-to-pose keyframes, staggered children, and combined opacity/transform transitions. Code-ready easing examples and CSS patterns are provided to speed adoption.
Why choose 300–500ms vs shorter or longer durations?
This range is long enough for users to perceive intent and storytelling but short enough to keep interaction fluid; shorter feels snappy but can be unclear, longer can feel sluggish.
How do I pick an easing curve for my animation?
Match easing to intent: natural UI movement uses smooth cubic-bezier(0.4,0,0.2,1); dramatic entrances use stronger deceleration; playful elements benefit from bouncy curves with overshoot.