Media Publishing
This applies Disney's 12 animation principles specifically to news sites and content platforms, which is surprisingly practical since reading experiences need restraint more than flash. You get timing tables (page transitions at 300ms, scroll indicators at 150ms), concrete guidance on when to use minimal squash and stretch versus when breaking news justifies urgency, and a clear hierarchy that keeps article text primary while images and navigation stay supportive. The parallax and skeleton screen examples are directly applicable. Honestly, the "content is king" framing makes this more useful than generic animation guides because it stops you from over-designing what should be an invisible reading experience.
- skills.sh installs
- 521
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill media-publishing --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
- Animation Principles Advanced
- Animation Principles Deep Dive
- Animation Principles Expert
- Animation Principles Intermediate
- Animation Principles Master
- Animation Principles Novice
- Animation Principles Quick Start
- Animation Principles Refresher
- Animation Principles Teaching Others
- Animation Principles Troubleshooting
- Animation Principles Universal Reference
- Video Motion Graphics2.7K
- Mobile Touch2.4K
- Framer Motion1.8K
- Motion Designer1.7K
- Micro Interactions1.5K
- Web Motion Design1.4K
- Scroll Animations1.2K
- Game Designer1.1K
- After Effects975
Recommended
More Design & UI/UX1
hook-tacticsmotion-team/creative-strategy-skillsReference library of 35+ hook and headline tactic types. Use this when a user asks for hooks organized by tactic, wants to know which tactic to use for a given 518skills.sh installs
hook-tacticsmotion-team/creative-strategy-skillsReference library of 35+ hook and headline tactic types. Use this when a user asks for hooks organized by tactic, wants to know which tactic to use for a given 518skills.sh installs2review-auditmotion-team/creative-strategy-skillsAnalyzes positive customer reviews to surface deep customer insights for ad copy. Use this whenever a user provides customer reviews and wants to understand the497skills.sh installs
review-auditmotion-team/creative-strategy-skillsAnalyzes positive customer reviews to surface deep customer insights for ad copy. Use this whenever a user provides customer reviews and wants to understand the497skills.sh installs3brand-intakemotion-team/creative-strategy-skillsRuns a structured brand intake interview and then conducts web research to build a comprehensive brand context document. Use this whenever the user says they're490skills.sh installs
brand-intakemotion-team/creative-strategy-skillsRuns a structured brand intake interview and then conducts web research to build a comprehensive brand context document. Use this whenever the user says they're490skills.sh installs4hook-voice-patternsmotion-team/creative-strategy-skillsA living swipe file of scroll-stopping hook templates collected from the wild — real sentence structures and native voice patterns that have proven they stop th480skills.sh installs
hook-voice-patternsmotion-team/creative-strategy-skillsA living swipe file of scroll-stopping hook templates collected from the wild — real sentence structures and native voice patterns that have proven they stop th480skills.sh installs5
ugc-scriptwritermotion-creative/skillsHelps outline and draft UGC-style scripts for paid social ads. Use when the user has an ad concept and wants to write a script for creator content. Triggers: "U465skills.sh installs
ugc-scriptwritermotion-creative/skillsHelps outline and draft UGC-style scripts for paid social ads. Use when the user has an ad concept and wants to write a script for creator content. Triggers: "U465skills.sh installs6
creating-dashboardsancoleman/ai-design-componentsCreates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. Use this skill 387skills.sh installs
creating-dashboardsancoleman/ai-design-componentsCreates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. Use this skill 387skills.sh installs