Gesture Responses

Gesture Response Animations

Apply Disney's 12 principles to direct user interactions.

Principle Application

Squash & Stretch: Elements compress on press (scale 0.95-0.97), spring back on release.

Anticipation: The press IS the anticipation. Response should be immediate - no delay.

Staging: Response originates from interaction point. Ripples expand from tap location.

Straight Ahead vs Pose-to-Pose: Define rest, pressed, and released poses. Transitions flow between them.

Follow Through & Overlapping: Release animation overshoots rest position. Scale to 1.02, settle to 1.0.

Slow In/Slow Out: Press: instant. Release: ease-out with overshoot cubic-bezier(0.34, 1.56, 0.64, 1).

Arcs: Drag elements follow finger with slight lag on curves. Snapping follows arc to destination.

Secondary Action: Press triggers ripple + scale + shadow change simultaneously.

Timing:

• Press response: 0-50ms (must feel instant)
• Release recovery: 150-300ms (can be playful)
• Ripple expansion: 400-600ms (decorative, can be slower)

Exaggeration: Subtle for press (0.97), playful for release (overshoot 1.03).

Solid Drawing: Pressed state should feel "pushed in" - smaller scale, reduced shadow, shifted color.

Appeal: Gestures should feel physically satisfying. Like pressing a real button.

Timing Recommendations

Implementation Patterns

/* Button press */.button {  transition: transform 50ms ease-out;}
.button:active {  transform: scale(0.97);}
/* Release with overshoot */.button:not(:active) {  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);}
/* Material ripple */.ripple {  animation: ripple 600ms ease-out forwards;}
@keyframes ripple {  from {    transform: scale(0);    opacity: 0.5;  }  to {    transform: scale(4);    opacity: 0;  }}

Drag Feedback Pattern

// Smooth drag with slight lagelement.style.transform = `translate(${x}px, ${y}px)`;element.style.transition = 'transform 50ms ease-out';
// Snap back with springelement.style.transition = 'transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)';element.style.transform = 'translate(0, 0)';

Critical Rule

Gesture responses must be under 100ms to feel connected to the action. Anything slower breaks the direct manipulation illusion. Test on actual touch devices.