Professionalism Credibility
If you're building enterprise software or dashboards where motion needs to feel competent rather than clever, this gives you the constraints. It maps Disney's animation principles to business contexts: minimal squash and stretch, no anticipation beyond 50-100ms, straight paths over arcs, timing locked to 150-250ms. The approach is restrictive by design, almost rigid, which is exactly the point. You get CSS easing curves tuned for professional contexts and clear guidance on when to skip animation entirely. Useful for B2B tools, financial interfaces, or anything where users would lose trust if your transitions felt playful or experimental.
- skills.sh installs
- 533
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill professionalism-credibility --agent claude-codeInstalls into .claude/skills of the current project.
Files
Professionalism & Credibility Animation
Create animations that convey competence, seriousness, and business-appropriate polish.
Emotional Goal
Professionalism means motion that respects users' time and context. Credibility comes from animations that demonstrate technical competence without showing off.
Disney Principles for Professionalism
Squash & Stretch
None to minimal (0-5%). Professional interfaces use rigid, precise motion. Objects maintain exact proportions.
Anticipation
Brief and functional (50-100ms). Just enough to prevent surprise. No theatrical preparation—get to the point.
Staging
Clear hierarchy and purpose. Business-appropriate layouts. Every element in its proper place with clear function.
Straight Ahead Action
Avoid entirely. Professional motion is controlled and predictable. No spontaneity or variation.
Follow Through & Overlapping Action
Minimal, controlled settling. Quick stabilization. No bouncing or playfulness—immediate completion.
Slow In & Slow Out
Smooth, professional curves. Standard easing that feels polished but not decorative. ease-out for efficiency.
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
- Design & UI/UX, Office & Documents
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- 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
Recommended
More Design & UI/UX
prototypeplugin87/ux-ui-agent-skillsMove an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and us528skills.sh installstoken-buildplugin87/ux-ui-agent-skillsSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS 522skills.sh installs
web-prototypenexu-io/open-designGeneral-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `refere301skills.sh installsemail-marketingnexu-io/open-designA brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications249skills.sh installsmagazine-web-pptnexu-io/open-design生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editori239skills.sh installshtml-ppt-obsidian-claude-gradientnexu-io/open-designGitHub 暗紫渐变 deck — GitHub-dark186skills.sh installs