Agent-Skills.md

Agent Skills: Media & Publishing Animation Principles

Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences

UncategorizedID: dylantarre/animation-principles/media-publishing

Repository

dylantarre/animation-principles
dylantarreLicense: MIT
52

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dylantarre/animation-principles/tree/HEAD/skills/08-by-industry/media-publishing

Skill Files

Browse the full folder contents for media-publishing.

Download Skill

Loading file tree…

skills/08-by-industry/media-publishing/SKILL.md

Skill Metadata

Name
media-publishing
Description
Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences

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.