home / skills / dylantarre / animation-principles / professionalism-credibility

professionalism-credibility skill

safe

/skills/06-by-emotional-outcome/professionalism-credibility

This skill helps you design animations that convey professionalism and credibility for business contexts using precise motion and minimal flourish.

npx playbooks add skill dylantarre/animation-principles --skill professionalism-credibility

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.1 KB

---
name: professionalism-credibility
description: Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.
---

# 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.

### Arc
Minimal curves, direct paths preferred. Professional motion is efficient. Straight lines communicate directness.

### Secondary Action
Functional only. Loading states, progress indicators. No decorative animation—everything serves a purpose.

### Timing
Efficient and consistent (150-250ms). Quick enough to feel responsive, slow enough to track. No wasted time.

### Exaggeration
None. Realistic, proportional movements. Professional means grounded and believable.

### Solid Drawing
Precise, consistent geometry. Perfect alignment. Technical accuracy in every detail.

### Appeal
Clean, systematic design. Grid-based layouts. Neutral colors. Function-first aesthetics.

## Timing Recommendations

| Element | Duration | Easing |
|---------|----------|--------|
| Transitions | 150-250ms | `ease-out` |
| Feedback | 100-150ms | `ease-out` |
| Modals | 200-250ms | `ease-out` |
| Data updates | 150-200ms | `ease-in-out` |

## CSS Easing

```css
--pro-standard: cubic-bezier(0.4, 0, 0.2, 1);
--pro-enter: cubic-bezier(0.0, 0, 0.2, 1);
--pro-exit: cubic-bezier(0.4, 0, 1, 1);
```

## Professional Patterns

```css
@keyframes pro-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pro-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.professional-element {
  animation: pro-slide-up 200ms ease-out forwards;
}
```

## Credibility Guidelines

- Consistent timing builds trust
- Smooth motion signals competence
- No animation is better than bad animation
- Match platform conventions
- Respect prefers-reduced-motion
- Test across devices for consistency

## When to Use

- B2B software
- Financial dashboards
- Legal and compliance tools
- Healthcare administration
- Government services
- Enterprise applications
- Professional portfolios
- Corporate websites

Overview

This skill helps designers and developers create animations for business contexts that emphasize seriousness, competence, and trustworthy presentation. It applies Disney's animation principles translated into practical rules, timings, and CSS patterns suited to corporate interfaces.

How this skill works

The skill inspects animation choices against professionalism criteria: minimal squash & stretch, short anticipation, controlled follow-through, and consistent timing. It provides concrete timing ranges, easing presets, CSS keyframes, and patterns to produce efficient, unobtrusive motion that reinforces credibility. It also flags risky or decorative motion and recommends reduced-motion and platform-consistent behaviors.

When to use it

B2B applications and enterprise dashboards
Financial, legal, healthcare, and government UIs
Corporate websites and professional portfolios
Admin tools and compliance interfaces
Any product where trust and efficiency are primary goals

Best practices

Keep squash & stretch to 0–5% or avoid it entirely for rigid elements
Use short anticipation (50–100ms) to prevent surprise without theatrics
Prefer direct motion with minimal arcs and fast settling
Use consistent timing (150–250ms for transitions) and standard easing
Limit secondary actions to functional feedback only
Respect prefers-reduced-motion and test across devices

Example use cases

Subtle slide-and-fade for row insertion in a financial table (200ms, ease-out)
Quick modal entrance for forms (200–250ms, pro-enter easing)
Feedback micro-animations for button confirmation (100–150ms, no bounce)
Progress indicators in dashboards with predictable, functional motion
Data update animations that use 150–200ms ease-in-out for clarity

FAQ

What if an animation needs to draw attention?

Use controlled, purposeful motion with clear function and short duration; avoid decorative exaggeration and prefer color or layout changes if stronger emphasis is required.

How do I balance polish with performance?

Favor GPU-friendly transforms, avoid heavy layout shifts, reuse simple keyframes, and keep durations short to minimize runtime cost.