/forms-inputs

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

.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