← Back to list

media-publishing
by dylantarre
Disney's 12 Animation Principles - Claude Code Skill Marketplace
⭐ 1🍴 1📅 Jan 24, 2026
SKILL.md
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.
Score
Total Score
60/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
✓最近の活動
1ヶ月以内に更新
+10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
○言語
プログラミング言語が設定されている
0/5
✓タグ
1つ以上のタグが設定されている
+5
Reviews
💬
Reviews coming soon


