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.