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.
- Anticipation
Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.
- Staging
Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.
- Straight Ahead & Pose to Pose
Define input states: default, focus, filled, valid, invalid, disabled. Clear poses for each state with smooth transitions.
- Follow Through & Overlapping Action
Floating label settles after reaching final position. Validation icon can bounce slightly. Character counter updates with subtle motion.
- Ease In & Ease Out
Focus transitions: ease-out. Validation feedback: ease-in-out. Label float: cubic-bezier(0.4, 0, 0.2, 1).
- Arcs
Floating labels should arc slightly during upward movement, not straight line. Adds organic feel to mechanical action.
- Secondary Action
While border highlights (primary), label floats (secondary), helper text appears (tertiary). Coordinate without overwhelming.
- Timing Focus border: 100-150ms Label float: 150-200ms Validation feedback: 200ms Error shake: 300ms (3-4 cycles) Success check: 250ms Checkbox toggle: 150ms
- Exaggeration
Error states can shake (4-6px, 2-3 times). Success states can pulse green briefly. Invalid inputs deserve clear, noticeable feedback.
- Solid Drawing
Maintain border-radius consistency. Label typography should stay crisp during transform. Icons should scale proportionally.
- 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