Media & Publishing Animation Principles
Apply Disney's 12 principles to create immersive reading experiences that enhance content without distracting from it.
The 12 Principles Applied
1. Squash & Stretch
- •Very Minimal: Content is serious, not playful
- •Bookmark Icon: Subtle press feedback
- •Share Buttons: Light tactile response
2. Anticipation
- •Article Load: Skeleton hints at content structure
- •Image Reveal: Brief preparation before full quality
- •Next Story: Preview of upcoming content
3. Staging
- •Content First: Article text is always primary
- •Media Integration: Images/video support, not distract
- •Navigation: Minimal, reveals on scroll
4. Straight Ahead & Pose to Pose
- •Reading Scroll: Continuous smooth flow (straight ahead)
- •Section Navigation: Jump to defined sections (pose to pose)
- •Slideshows: Clear frame transitions
5. Follow Through & Overlapping Action
- •Parallax Images: Background moves slower than text
- •Pull to Refresh: Content follows indicator
- •Article Cards: Image loads, then headline appears
6. Slow In & Slow Out
- •Page Transitions: Smooth, never jarring reading
- •Modal Opens: Comfortable 300-350ms
- •Menu Reveals: Elegant ease-in-out
7. Arc
- •Scroll Progress: Curved indicator paths
- •Share Sheet: Options arc into view
- •Swipe Navigation: Natural curved gestures
8. Secondary Action
- •Save Article: Subtle confirmation animation
- •Loading Images: Shimmer while fetching
- •Audio Player: Waveform while playing
9. Timing
- •Unobtrusive: 200-300ms standard transitions
- •Reading Flow: Never interrupt consumption
- •Interactive Elements: Quick 150ms feedback
10. Exaggeration
- •Avoid Mostly: News/content requires credibility
- •Breaking News: Appropriate urgency only
- •Feature Stories: Subtle dramatic reveals
11. Solid Drawing
- •Typography Excellence: Perfect text rendering
- •Image Quality: Crisp media at all sizes
- •Layout Consistency: Reliable grid systems
12. Appeal
- •Elegant Restraint: Premium publication feel
- •Brand Voice: Motion matches editorial tone
- •Readability Focus: Animations serve content
Industry Timing Standards
| Action | Duration | Easing |
|---|---|---|
| Page Transition | 300ms | ease-in-out |
| Image Load | 250ms | ease-out |
| Menu Open | 250ms | ease-out |
| Share Action | 200ms | ease-out |
| Scroll Indicator | 150ms | ease-out |
Key Principle
The content is king. All animation exists to enhance readability and content discovery, never to showcase design. Motion should feel invisible while reading.