media-publishing
Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences
When & Why to Use This Skill
This Claude skill provides a specialized framework for designing purposeful animations within media and publishing environments. By adapting Disney's 12 animation principles to digital content platforms, it enables designers to create immersive, high-end reading experiences that prioritize content readability while using motion to enhance brand voice and user engagement.
Use Cases
- Case 1: Developing subtle micro-interactions for UI elements like bookmarking and sharing to provide tactile feedback without disrupting the reading flow.
- Case 2: Implementing skeleton screens and anticipation-based loading states to hint at content structure and improve perceived performance on news sites.
- Case 3: Designing elegant page transitions and menu reveals using industry-standard timing (250ms-300ms) to ensure a smooth, premium user experience.
- Case 4: Applying parallax effects and secondary actions to long-form feature stories to create visual depth and a sophisticated editorial feel.
- Case 5: Establishing motion guidelines that align with a publication's brand voice, ensuring animations convey credibility and urgency where appropriate.
| 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.