playbooks

home / skills / dylantarre / animation-principles / universal-elements

universal-elements skill

/skills/07-by-ui-element/universal-elements

This skill applies Disney's animation principles to UI elements, delivering subtle, consistent motion that enhances usability and delight.

npx playbooks add skill dylantarre/animation-principles --skill universal-elements

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

Files (1)
SKILL.md
3.4 KB
---
name: universal-elements
description: Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
---

# Universal Element Animation Principles

Apply Disney's 12 principles to any UI element for consistent, professional motion design.

## Universal Application of Principles

### 1. Squash & Stretch
Any element that responds to interaction can squash (compress on impact/press) and stretch (extend on release). Keep it subtle: 2-5% maximum for UI.

### 2. Anticipation
Before any significant action, a brief preparatory motion signals what's coming. Scale down before scale up, pull back before push forward. 50-100ms duration.

### 3. Staging
Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.

### 4. Straight Ahead & Pose to Pose
Pose-to-pose for most UI: define start and end states clearly. Straight-ahead for organic, flowing animations like particles or organic shapes.

### 5. Follow Through & Overlapping Action
Nothing stops all at once. Child elements lag behind parents. Shadows settle after objects. Stagger related elements 20-50ms apart.

### 6. Ease In & Ease Out
The golden rule: never use `linear` for UI motion. Enter with `ease-out`, exit with `ease-in`, transition with `ease-in-out`.

### 7. Arcs
Natural motion follows curved paths. Add subtle vertical movement to horizontal transitions. Rotate while translating. Avoid robotic straight lines.

### 8. Secondary Action
Every primary action deserves supporting animation. Shadow changes, color shifts, icon rotations, glow effects reinforce without competing.

### 9. Timing
| Element Type | Fast | Normal | Slow |
|--------------|------|--------|------|
| Micro (icons, buttons) | 50-100ms | 100-200ms | 200-300ms |
| Small (cards, inputs) | 150-200ms | 200-300ms | 300-400ms |
| Medium (modals, menus) | 200-250ms | 250-350ms | 350-500ms |
| Large (pages, overlays) | 300-400ms | 400-600ms | 600-800ms |

### 10. Exaggeration
Match animation intensity to context. Celebratory moments allow 20-30% exaggeration. Professional contexts keep it under 10%. Error states can be more dramatic.

### 11. Solid Drawing
Maintain visual consistency: border-radius ratios, shadow directions, spacing rhythms, typography scale. Nothing should distort or break during animation.

### 12. Appeal
The goal is delight without distraction. Smooth animations build trust. Snappy feedback feels responsive. The best animation is felt, not noticed.

## CSS Foundation

```css
/* Universal transition base */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standard durations as custom properties */
:root {
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Apply to any interactive element */
.interactive {
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
```

## Key Properties (Any Element)
- `transform`: universal positioning and scaling
- `opacity`: visibility transitions
- `transition`: state changes
- `animation`: complex sequences
- `box-shadow`: depth and emphasis

Overview

This skill applies Disney’s 12 animation principles to any UI element to create consistent, professional motion across products. It focuses on timing, easing, and simple properties so interactions feel responsive and delightful. Use it when you need general-purpose animation guidance that works across buttons, cards, modals, icons, and complex components.

How this skill works

The skill inspects the element role and size, then recommends appropriate timing, easing, and property choices (transform, opacity, box-shadow, animation). It provides concrete rules: subtle squash & stretch, short anticipations, staged hierarchy, arcs, and staggered follow-through. Output includes suggested duration ranges, easing curves, and small CSS examples or variables you can drop into your design system.

When to use it

  • Animating elements not covered by a specialized animation pattern
  • Applying a unified motion language across components and screens
  • Rapidly prototyping interaction feedback for buttons, inputs, and icons
  • Defining consistent timing and easing for a design system
  • Creating accessible, non-distracting motion for product UX

Best practices

  • Prefer transform and opacity over layout-changing properties for performance
  • Use non-linear easing (ease-in, ease-out, ease-in-out) instead of linear
  • Keep squash & stretch subtle in UI (2–5%) and limit exaggeration by context
  • Stagger child elements 20–50ms to imply follow-through and hierarchy
  • Choose timings based on element scale: micro → fast, large → slow; avoid excessive durations
  • Maintain consistent shadow, radius, and spacing rhythms so motion feels cohesive

Example use cases

  • Button press: 50–100ms squash with ease-out and a quick shadow change as a secondary action
  • Card entrance: medium timing with vertical arc and 20–40ms stagger for child content
  • Modal open: slow ease-in-out for overlay opacity and a 300–400ms scale with follow-through shadow settle
  • Icon feedback: micro timing, bounce easing for celebratory state, keep exaggeration ≤30%
  • List reordering: straight-ahead animation for organic movement or pose-to-pose for predictable swaps

FAQ

How do I choose durations for a new component?

Map the component to a size category (micro, small, medium, large) and pick fast/normal/slow from the timing table; adjust ±50ms based on perceived weight.

Should I animate layout properties like width/height?

Avoid animating width/height when possible. Use transform (scale, translate) and opacity for smoother GPU-accelerated motion.