medium-300-500ms
Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication
When & Why to Use This Skill
This Claude skill serves as a professional framework for implementing medium-duration UI animations (300-500ms), essential for creating a polished and cohesive brand identity. By integrating the 12 Disney Animation Principles with modern CSS implementation patterns, it helps developers and designers build meaningful motion that enhances storytelling, improves user flow, and defines the perceived quality of digital products.
Use Cases
- Page and View Transitions: Creating smooth, high-quality transitions between different application states to maintain user context.
- Complex Modal Sequences: Designing sophisticated entry and exit animations for dialogs and overlays using professional easing functions.
- Animated Illustrations: Applying physics-based motion to brand illustrations to make them feel natural and engaging.
- Data Visualization: Animating shifts in charts and graphs to help users visually track changes in data sets.
- Onboarding and Feature Reveals: Using choreographed motion to guide new users through product tours and highlight key features.
- Loading Completion Celebrations: Implementing delightful micro-interactions that reward users upon successful task completion.
| 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
/* 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
.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.