Friendliness Approachability
This is a solid reference for making UI animations feel warm and inviting rather than sterile or intimidating. It maps Disney's animation principles to web interactions, giving you specific durations (200-350ms for most actions), easing functions, and CSS snippets for things like friendly waves and gentle appearances. The timing tables and approachability cues are immediately usable. Best suited for customer-facing interfaces like support chat, onboarding, or healthcare portals where you want users to feel comfortable. The guidance on moderate squash and stretch (10-20%) and gentle bounces keeps things professional while still feeling human. Worth having if you're trying to nail that approachable tone without going full cartoon.
- skills.sh installs
- 531
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill friendliness-approachability --agent claude-codeInstalls into .claude/skills of the current project.
Files
Friendliness & Approachability Animation
Create animations that welcome users and make interfaces feel warm and inviting.
Emotional Goal
Friendliness comes from gentle, welcoming motion that doesn't intimidate. Approachability means animations that invite interaction and make users feel comfortable.
Disney Principles for Friendliness
Squash & Stretch
Moderate, soft deformation (10-20%). Enough to feel alive without being cartoonish. Like a friendly handshake—warm but appropriate.
Anticipation
Gentle preparation (100-150ms). Friendly motion telegraphs intention without startling. A small "hello" before action.
Staging
Open, inviting compositions. Elements arranged to welcome, not confront. Clear pathways into the interface.
Straight Ahead Action
Light spontaneity for personality. Subtle variations that feel human and approachable rather than mechanical.
Follow Through & Overlapping Action
Soft, natural settling. A gentle bounce or two. Like a friend sitting down beside you—relaxed, not rigid.
Slow In & Slow Out
Smooth, approachable curves. No sharp accelerations. ease-out for welcoming entrances that arrive gently.
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
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
- Animation Principles Advanced
- Animation Principles Deep Dive
- Animation Principles Expert
Recommended
More Design & UI/UX
large-500-800msdylantarre/animation-principlesUse when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention530skills.sh installsuniversal-fallbackdylantarre/animation-principlesUse when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.525skills.sh installsmedia-publishingdylantarre/animation-principlesUse when designing animations for news sites, content platforms, publishing apps, or media consumption experiences521skills.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 installsreview-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 installsbrand-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