Mobile Touch
Shape iOS and Android gesture, haptic, and motion behavior using Disney animation principles so native-feeling interactions stay at 60fps.
Overview
mobile-touch is an agent skill for the Build phase that maps Disney’s 12 animation principles to iOS/Android gestures, haptics, and native motion patterns.
Install
npx skills add https://github.com/dylantarre/animation-principles --skill mobile-touchWhat is this skill?
- Maps all 12 Disney animation principles to concrete mobile patterns (rubber-band, long-press preview, swipe arcs).
- Specifies touch response under 100ms and transitions in the 250–350ms range with 60fps minimum.
- Covers squash/stretch on buttons, momentum scrolling, haptic pulses paired with visual feedback, and safe-area anchors.
- Contrasts gesture-driven motion vs preset pose-to-pose transitions for sheets and modals.
- Quick-reference table for staging, anticipation, and follow-through on native scroll and dismiss gestures.
- 12 Disney animation principles mapped to mobile implementations
- Touch response target under 100ms; transitions 250–350ms
- 60fps minimum for appeal and gesture continuity
Adoption & trust: 1.8k installs on skills.sh; 44 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a mobile app but gestures feel stiff, scroll limits snap harshly, or haptics and visuals are out of sync.
Who is it for?
Indie developers polishing native-feeling touch, scroll, and sheet interactions on iOS or Android.
Skip if: Teams only tuning web CSS animations with no native gesture or haptic requirements.
When should I use this skill?
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
What do I get? / Deliverables
You get concrete mobile motion rules—timing, rubber-band, sheets, and arcs—your agent can implement consistently across screens.
- Gesture and transition timing spec aligned to 12 principles
- Haptic-visual pairing notes per interaction
Recommended Skills
Web Design Guidelinesvercel-labs/agent-skills
Lark Whiteboardlarksuite/cli
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
Sleek Design Mobile Appssleekdotdesign/agent-skills
Impeccablepbakaus/impeccable
Design Taste Frontendleonxlnx/taste-skill
Journey fit
How it compares
Design motion playbook for native touch, not a Tailwind or CSS keyframe cheat sheet.
Common Questions / FAQ
Who is mobile-touch for?
Solo and indie builders shipping iOS or Android apps who want Disney-style motion discipline applied to gestures, haptics, and transitions.
When should I use mobile-touch?
During Build (frontend) when defining pull-to-refresh, long-press previews, swipe-to-dismiss, sheet presentations, or haptic-backed feedback—or when scroll rubber-banding and 60fps motion need explicit targets.
Is mobile-touch safe to install?
It is reference guidance only; review the Security Audits panel on this catalog page before installing any skill from the marketplace.
SKILL.md
READMESKILL.md - Mobile Touch
# 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 ```swift // Spring animation with follow-through UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: .curveEaseOut) // Haptic pairing let feedback = UIImpactFeedbackGenerator(style: .medium) feedback.impactOccurred() ``` ### Android ```kotlin // Material spring animation SpringAnimation(view, DynamicAnimation.TRANSLATION_Y) .setSpring(SpringForce() .setStiffness(SpringForce.STIFFNESS_MEDIUM) .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY)) .start() ``` ## 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.