Gesture Responses
A solid reference for making buttons, taps, and drags feel physically responsive instead of laggy. The timing tables are the real value here: press under 50ms, release around 200ms with overshoot easing, and anything over 100ms breaks the direct manipulation feel. It applies Disney animation principles to interaction design, which sounds gimmicky but actually translates well. The squash and stretch guidance (scale to 0.97 on press, overshoot to 1.02 on release) gives you concrete numbers instead of vague advice. Includes both CSS and JavaScript patterns for ripples and drag feedback. Best used when your interface feels sluggish or disconnected, and you need specific timing values to fix it.
- skills.sh installs
- 579
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill gesture-responses --agent claude-codeInstalls into .claude/skills of the current project.
Files
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).
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
Recommended
More Design & UI/UX
entrance-animationsdylantarre/animation-principlesUse when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.572skills.sh installsattention-grabbersdylantarre/animation-principlesUse when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.565skills.sh installsloaders-spinnersdylantarre/animation-principlesUse when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status554skills.sh installsforms-inputsdylantarre/animation-principlesUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback553skills.sh installssocial-mediadylantarre/animation-principlesUse when designing animations for social platforms, messaging apps, content sharing, or community features551skills.sh installsuser-feedback-claritydylantarre/animation-principlesUse when users don't notice feedback, miss state changes, or can't tell if their action worked542skills.sh installs