Media Publishing

Name: Media Publishing
Author: dylantarre

dylantarre/animation-principles

304 installs
68 repo stars
Updated December 30, 2025
dylantarre/animation-principles

Animate article layouts, reading progress, media embeds, and editorial navigation so publishing sites feel polished while keeping text legible and scroll performance smooth.

About

Delivers animation principles for media and publishing sites—article reveals, hero media, reading chrome, and editorial navigation—with motion that elevates storytelling while preserving legibility, speed, and content-first hierarchy.

Reading-friendly reveal timing
Hero and embed load motion
Sticky nav transitions
Scroll performance discipline
Editorial hierarchy emphasis

Media Publishing by the numbers

304 all-time installs (skills.sh)
Ranked #826 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 3, 2026 (Skillselion catalog sync)

npx skills add https://github.com/dylantarre/animation-principles --skill media-publishing

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/dylantarre/animation-principles/media-publishing.svg)](https://skillselion.com/skills/dylantarre/animation-principles/media-publishing)

Installs	304
repo stars	★ 68
Last updated	December 30, 2025
Repository	dylantarre/animation-principles ↗

What it does

Animate article layouts, reading progress, media embeds, and editorial navigation so publishing sites feel polished while keeping text legible and scroll performance smooth.

Files

SKILL.mdMarkdownGitHub ↗

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.