Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

Mobile Touch Animation Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion. Quick Reference Principle Mobile Implementation Squash & Stretch Rubber banding, bounce on scroll limits Anticipation Peek before reveal, long press preview Staging Sheet presentations, focus states Straight Ahead / Pose to Pose Gesture driven vs preset transitions Follow Through / Overlapping Momentum scrolling, trailing elements Slow In / Slow Out iOS spring animations, Material easing Arc Swipe to dismiss curves, card throws Secondary Action Haptic pulse with visual feedback Timing Touch response <100ms, transitions 250 350ms Exaggeration Bounce amplitude, haptic intensity Solid Drawing Respect safe areas, consistent anchors Appeal 60fps minimum, gesture continuity Principle Applications Squash & Stretch : Implement rubber band effect at scroll boundaries. Pull to refresh should stretch content naturally. Buttons compress on touch. Anticipation : Long press shows preview before full action. Drag threshold provides visual hint before item lifts. Swipe shows edge of destination content. Staging : Use sheet presentations to maintain context. Dim and scale background during modal focus. Hero transitions connect views meaningfully. 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. Follow Through & Overlapping : Content continues moving after finger lifts (momentum). Navigation bar elements animate slightly after main content. Lists items settle with stagger. 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. Arc : Thrown cards follow parabolic arcs. Swipe to dismiss curves based on velocity vector. FAB expand/collapse follows natural arc path. Secondary Action : Pair haptic feedback with visual response. Button ripple accompanies press. Success checkmark triggers light haptic. Timing : Touch acknowledgment: <100ms. Quick actions: 150 250ms. View transitions: 250 350ms. Complex animations: 350 500ms. Haptic should sync precisely with visual. Exaggeration : Pull to refresh stretches beyond natural—makes feedback clear. Error shake is pronounced. Success animations celebrate appropriately. Solid Drawing : Respect device safe areas during animation. Maintain consistent transform origins. Account for notch/dynamic island in motion paths. Appeal : Minimum 60fps, target 120fps on ProMotion displays. Gesture driven animation must feel connected to finger. Interruptible animations essential. Platform Patterns iOS Android Haptic Guidelines Action iOS Android Selection .selection EFFECT TICK Success .success EFFECT CLICK Warning .warning EFFECT DOUBLE CLICK Error .error EFFECT HEAVY CLICK Haptics are secondary action—always pair with visual confirmation.

mobile-touch