home / skills / dylantarre / animation-principles / forms-inputs

forms-inputs skill

safe

This skill helps animate form fields using Disney principles to provide clear feedback, delightful interactions, and polished state transitions.

npx playbooks add skill dylantarre/animation-principles --skill forms-inputs

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

Files (1)

SKILL.md

2.8 KB

---
name: forms-inputs
description: Use when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback
---

# Form & Input Animation Principles

Apply Disney's 12 principles to forms for clear feedback and delightful interactions.

## Principles Applied to Form Elements

### 1. Squash & Stretch
Input fields can subtly expand on focus (1-2px height). Submit button compresses on click. Checkboxes bounce on toggle.

### 2. Anticipation
Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.

### 3. Staging
Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.

### 4. Straight Ahead & Pose to Pose
Define input states: default, focus, filled, valid, invalid, disabled. Clear poses for each state with smooth transitions.

### 5. Follow Through & Overlapping Action
Floating label settles after reaching final position. Validation icon can bounce slightly. Character counter updates with subtle motion.

### 6. Ease In & Ease Out
Focus transitions: `ease-out`. Validation feedback: `ease-in-out`. Label float: `cubic-bezier(0.4, 0, 0.2, 1)`.

### 7. Arcs
Floating labels should arc slightly during upward movement, not straight line. Adds organic feel to mechanical action.

### 8. Secondary Action
While border highlights (primary), label floats (secondary), helper text appears (tertiary). Coordinate without overwhelming.

### 9. Timing
- Focus border: 100-150ms
- Label float: 150-200ms
- Validation feedback: 200ms
- Error shake: 300ms (3-4 cycles)
- Success check: 250ms
- Checkbox toggle: 150ms

### 10. Exaggeration
Error states can shake (4-6px, 2-3 times). Success states can pulse green briefly. Invalid inputs deserve clear, noticeable feedback.

### 11. Solid Drawing
Maintain border-radius consistency. Label typography should stay crisp during transform. Icons should scale proportionally.

### 12. Appeal
Responsive forms feel modern. Micro-animations guide users. Satisfying feedback reduces form abandonment. Worth the investment.

## CSS Implementation

```css
.input-field {
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.floating-label {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              font-size 200ms ease-out,
              color 150ms ease-out;
}

.input-field:focus + .floating-label {
  transform: translateY(-24px) scale(0.85);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
```

## Key Properties
- `transform`: translateY (label), translateX (shake)
- `border-color`: state indication
- `box-shadow`: focus rings
- `color`: label/text states
- `opacity`: helper text, icons

Overview

This skill shows how to apply Disney’s 12 animation principles to form fields, inputs, textareas, selects, and other interactive form elements to improve usability and feedback. It focuses on micro-animations that clarify state changes, guide attention, and provide delightful, accessible responses. Use the patterns and timing recommendations to reduce friction and form abandonment.

How this skill works

The skill describes specific animation patterns for focus, validation, toggles, labels, and buttons, mapping each to a principle like anticipation, squash & stretch, and ease in/out. It includes concrete timing guidelines, CSS snippets for transitions and keyframes, and recommended properties to animate (transform, border-color, box-shadow, color, opacity). Implementations center on clear state poses (default, focus, filled, valid, invalid, disabled) with coordinated primary and secondary actions.

When to use it

When you want clearer feedback for focus and validation in forms.
When redesigning inputs to feel modern and responsive across devices.
When reducing form abandonment by making interactions satisfying.
When adding micro-animations to accessibility-friendly components.

Best practices

Define clear poses for each state and animate between them with short durations (100–250ms).
Use transform and opacity rather than layout properties to preserve performance.
Coordinate primary (border/shadow) and secondary (label/helper text) actions without overwhelming the user.
Favor subtle exaggeration for errors and success states to draw attention, but keep motion minimal for accessibility.
Keep typography and icon scaling consistent to preserve visual clarity during transforms.

Example use cases

Floating label that arcs upward and scales on input focus with 150–200ms timing.
Submit button that compresses on click and pulses on success for 200–250ms.
Checkbox and toggle animations that bounce on change using 150ms toggles.
Error shake animation (300ms, 3–4 cycles) for invalid submissions to clearly indicate problems.
Character counters and validation icons that follow through with subtle settling motion.

FAQ

Will these animations hurt performance?

If you animate GPU-friendly properties (transform, opacity) and keep durations short, performance impact is minimal. Avoid animating layout properties like height where possible.

How do I keep animations accessible?

Respect reduced-motion preferences, provide clear non-animated state changes, and ensure animations don’t obscure content or interfere with form completion.