Media & Publishing Animation Principles

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

Key Principle