Mobile Touch

1---2name: mobile-touch3description: Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.4---5 6# Mobile Touch Animation7 8Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion.9 10## Quick Reference11 12| Principle | Mobile Implementation |13|-----------|----------------------|14| Squash & Stretch | Rubber-banding, bounce on scroll limits |15| Anticipation | Peek before reveal, long-press preview |16| Staging | Sheet presentations, focus states |17| Straight Ahead / Pose to Pose | Gesture-driven vs preset transitions |18| Follow Through / Overlapping | Momentum scrolling, trailing elements |19| Slow In / Slow Out | iOS spring animations, Material easing |20| Arc | Swipe-to-dismiss curves, card throws |21| Secondary Action | Haptic pulse with visual feedback |22| Timing | Touch response <100ms, transitions 250-350ms |23| Exaggeration | Bounce amplitude, haptic intensity |24| Solid Drawing | Respect safe areas, consistent anchors |25| Appeal | 60fps minimum, gesture continuity |26 27## Principle Applications28 29**Squash & Stretch**: Implement rubber-band effect at scroll boundaries. Pull-to-refresh should stretch content naturally. Buttons compress on touch.30 31**Anticipation**: Long-press shows preview before full action. Drag threshold provides visual hint before item lifts. Swipe shows edge of destination content.32 33**Staging**: Use sheet presentations to maintain context. Dim and scale background during modal focus. Hero transitions connect views meaningfully.34 35**Straight Ahead vs Pose to Pose**: Gesture-following animations (drag, pinch) are straight ahead—driven by touch input. System transitions (push, present) are pose to pose—predefined keyframes.36 37**Follow Through & Overlapping**: Content continues moving after finger lifts (momentum). Navigation bar elements animate slightly after main content. Lists items settle with stagger.38 39**Slow In / Slow Out**: iOS uses spring physics—configure mass, stiffness, damping. Android Material uses standard easing: `FastOutSlowIn`. Never use linear for user-initiated motion.40 41**Arc**: Thrown cards follow parabolic arcs. Swipe-to-dismiss curves based on velocity vector. FAB expand/collapse follows natural arc path.42 43**Secondary Action**: Pair haptic feedback with visual response. Button ripple accompanies press. Success checkmark triggers light haptic.44 45**Timing**: Touch acknowledgment: <100ms. Quick actions: 150-250ms. View transitions: 250-350ms. Complex animations: 350-500ms. Haptic should sync precisely with visual.46 47**Exaggeration**: Pull-to-refresh stretches beyond natural—makes feedback clear. Error shake is pronounced. Success animations celebrate appropriately.48 49**Solid Drawing**: Respect device safe areas during animation. Maintain consistent transform origins. Account for notch/dynamic island in motion paths.50 51**Appeal**: Minimum 60fps, target 120fps on ProMotion displays. Gesture-driven animation must feel connected to finger. Interruptible animations essential.52 53## Platform Patterns54 55### iOS56```swift57// Spring animation with follow-through58UIView.animate(withDuration: 0.5,59               delay: 0,60               usingSpringWithDamping: 0.7,61               initialSpringVelocity: 0.5,62               options: .curveEaseOut)63 64// Haptic pairing65let feedback = UIImpactFeedbackGenerator(style: .medium)66feedback.impactOccurred()67```68 69### Android70```kotlin71// Material spring animation72SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)73    .setSpring(SpringForce()74        .setStiffness(SpringForce.STIFFNESS_MEDIUM)75        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))76    .start()77```78 79## Haptic Guidelines80 81| Action | iOS | Android |82|--------|-----|---------|83| Selection | `.selection` | `EFFECT_TICK` |84| Success | `.success` | `EFFECT_CLICK` |85| Warning | `.warning` | `EFFECT_DOUBLE_CLICK` |86| Error | `.error` | `EFFECT_HEAVY_CLICK` |87 88Haptics are secondary action—always pair with visual confirmation.