Social Media
If you're building social features, this gives you Disney's 12 animation principles translated into concrete examples like heart buttons that squish and bounce, reaction emojis that stretch, and stories that follow natural arcs. The timing table is genuinely useful: 200ms for likes with spring easing, 300ms for pull-to-refresh. It's opinionated about dopamine design and making interactions feel rewarding, which is honest about what social media animation actually does. The principle reminders help you avoid the trap of animations that feel manipulative rather than expressive. Best for product designers who know they need motion but aren't sure how to apply classic animation theory to feeds, reactions, and shares.
- skills.sh installs
- 551
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill social-media --agent claude-codeInstalls into .claude/skills of the current project.
Files
Social Media Animation Principles
Apply Disney's 12 principles to create engaging, expressive experiences that encourage interaction and emotional connection.
The 12 Principles Applied
1. Squash & Stretch
- Like Buttons: Heart squishes on tap, then bounces back
- Reaction Emojis: Playful stretch during selection
- Send Button: Compress before message flies away
2. Anticipation
- Post Button: Brief wind-up before publishing
- Stories: Tap-and-hold with radial progress
- Swipe Actions: Preview hints at what's coming
3. Staging
- Content First: User content is always the star
- Reactions Bar: Clear but not overshadowing
- Notifications: Prominent but dismissible
4. Straight Ahead & Pose to Pose
- Feed Scroll: Endless smooth flow (straight ahead)
- Posting Flow: Step-by-step creation (pose to pose)
- Story Sequences: Frame-by-frame progression
5. Follow Through & Overlapping Action
- Like Animation: Icon bounces, count updates after
- Comment Thread: Avatar appears, then text
- Share Menu: Options cascade in sequence
Sponsors
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 languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Categories
- Marketing & SEO, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
Recommended
More Marketing & SEO
brand-strategistdylantarre/animation-principlesUse when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.548skills.sh installs
seo-content-briefopenclaudia/openclaudia-skillsCreate an SEO content brief for writers. Use when the user says "content brief", "SEO brief", "writing brief", "brief for", "writer brief", "outline for SEO", o462skills.sh installsmarketing-ideasopenclaudia/openclaudia-skills139 proven marketing ideas organized by category with implementation guidance. Use when asked for marketing ideas, growth strategies, campaign brainstorms, or "439skills.sh installs
core-web-vitals-tunerpatricio0312rev/skillsSystematically improves Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) with prioritized fixes and verificati319skills.sh installs