playbooks

home / skills / dylantarre / animation-principles / trust-reliability

trust-reliability skill

/skills/06-by-emotional-outcome/trust-reliability

This skill helps you design trust-building UI animations that convey reliability through predictable, controlled motion aligned with Disney's principles.

npx playbooks add skill dylantarre/animation-principles --skill trust-reliability

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

Files (1)
SKILL.md
3.0 KB
---
name: trust-reliability
description: Use when creating animations that build user confidence, establish credibility, and communicate dependability.
---

# Trust & Reliability Animation

Create animations that establish confidence, consistency, and dependable user experiences.

## Emotional Goal

Trust develops through predictable, controlled movements that respect user expectations. Reliability means animations behave consistently and never surprise negatively.

## Disney Principles for Trust

### Squash & Stretch
Minimal stretch (5-10% maximum). Controlled deformation shows stability. Elements should feel solid and grounded, not rubbery.

### Anticipation
Subtle but present (50-100ms). Brief preparation signals what's coming without surprises. Users should always know what to expect next.

### Staging
Clear, unambiguous presentation. One action at a time. Important elements are obvious. No hidden or confusing movements.

### Straight Ahead Action
Avoid for trust-building. Prefer pose-to-pose for predictable, controlled results. Every frame should be intentional.

### Follow Through & Overlapping Action
Restrained follow-through. Elements settle quickly without excessive bouncing. Professional, controlled completion of movements.

### Slow In & Slow Out
Smooth, symmetrical easing. `ease-in-out` creates predictable, professional motion. No sudden accelerations or jarring stops.

### Arc
Gentle, predictable curves. Consistent arc patterns across similar interactions. Avoid erratic or unexpected paths.

### Secondary Action
Minimal and purposeful. Supporting animations should reinforce, not distract. Loading indicators should be calm and steady.

### Timing
Moderate, consistent timing (250-400ms). Never too fast (feels rushed) or too slow (feels broken). Same elements should always animate at same speed.

### Exaggeration
Very minimal (5-10%). Near-realistic movements feel professional and trustworthy. Subtle refinement over dramatic effect.

### Solid Drawing
Maintain perfect proportions. No warping or distortion. Elements should feel stable and well-constructed.

### Appeal
Clean, balanced designs. Symmetry suggests stability. Professional aesthetics over playful charm.

## Timing Recommendations

| Element | Duration | Easing |
|---------|----------|--------|
| Transitions | 250-350ms | `ease-in-out` |
| Feedback | 150-200ms | `ease-out` |
| Loading | Continuous | `linear` |
| Modals | 200-300ms | `ease-out` |

## CSS Easing

```css
--trust-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--trust-enter: cubic-bezier(0, 0, 0.2, 1);
--trust-exit: cubic-bezier(0.4, 0, 1, 1);
```

## Consistency Rules

1. Same action = same animation, always
2. Duration variance: maximum ±50ms
3. No random or variable timing
4. Respect system motion preferences
5. Graceful degradation when disabled

## When to Use

- Financial transactions and payments
- Form submissions and data entry
- Authentication flows
- Settings and configuration
- Progress indicators
- Confirmation dialogs
- Enterprise applications

Overview

This skill helps designers and developers create animations that build user confidence, establish credibility, and communicate dependable behavior. It codifies trust-focused adaptations of classic animation principles to ensure motion feels stable, professional, and predictable. Use it to make interactions feel reliable across interfaces and platforms.

How this skill works

The skill inspects intended motion patterns and recommends adjustments for predictability: constrained squash & stretch, subtle anticipation, pose-to-pose structure, restrained follow-through, and consistent timing. It maps specific durations and easing curves for transitions, feedback, loading, and modals, and enforces consistency rules like identical actions using identical animations and respecting system motion preferences.

When to use it

  • Payments, financial transactions, and other trust-sensitive flows
  • Form submissions, data entry, and any action with user data
  • Authentication, sign-in, and security-related UI
  • Settings, configuration panels, and critical controls
  • Progress indicators, loading states, and confirmations
  • Enterprise apps where consistency and predictability matter

Best practices

  • Prefer pose-to-pose animation for predictability and control
  • Use moderate, consistent timing (typically 250–400ms for transitions)
  • Apply subtle anticipation (50–100ms) and minimal exaggeration (5–10%)
  • Keep secondary actions minimal and purposeful to avoid distraction
  • Use smooth ease-in-out curves and honor system motion preferences
  • Enforce same action = same animation and limit duration variance to ±50ms

Example use cases

  • A payment confirmation modal that uses a 200–300ms ease-out entry and calm follow-through to reassure users
  • A form validation state that uses 150–200ms feedback animations with ease-out to clearly communicate results
  • Loading indicators with linear, continuous motion that remain unobtrusive and predictable
  • Authentication flows that use subtle anticipation and consistent timing to reduce user anxiety
  • Enterprise dashboard interactions that reuse identical transitions across modules for a cohesive experience

FAQ

What timing and easing should I use for most transitions?

Use 250–350ms with an ease-in-out curve (cubic-bezier(0.4,0,0.2,1)) for most transitions; feedback can be 150–200ms ease-out.

How much squash & stretch is acceptable for trust-focused motion?

Keep squash & stretch very limited—around 5–10% maximum—so elements feel solid and not rubbery.