Hover Interactions
This applies Disney's 12 animation principles specifically to hover states, which is honestly a great framework for something most devs just wing with arbitrary timing values. You get concrete recommendations like 150-200ms for hover-in and 200-300ms for hover-out, plus ready-to-use CSS patterns for card lifts, underline animations, and icon shifts. The timing table is genuinely useful reference material. It emphasizes keeping effects subtle (max 1.05 scale) and responsive, with proper fallbacks for touch devices using the hover media query. Good for when you want hover interactions that feel polished instead of just functional.
- skills.sh installs
- 650
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill hover-interactions --agent claude-codeInstalls into .claude/skills of the current project.
Files
Hover Interaction Animations
Apply Disney's 12 principles to mouse hover states.
Principle Application
Squash & Stretch: Cards can subtly scale (1.02-1.05) on hover, creating "lift" effect.
Anticipation: Hover IS anticipation for click. The hover state previews the interaction.
Staging: Hover effects should highlight the interactive element, not distract from it.
Straight Ahead vs Pose-to-Pose: Define rest and hover poses precisely. Transition smoothly between them.
Follow Through & Overlapping: Child elements animate after parent. Card lifts, then shadow expands.
Slow In/Slow Out: Hover-in: ease-out (fast response). Hover-out: ease-in-out (graceful return).
Arcs: Underlines can draw from center outward. Highlights sweep in curved paths.
Secondary Action: Combine multiple subtle effects. Scale + shadow + color shift together.
Timing:
- Hover response: 150-200ms (must feel responsive)
- Hover exit: 200-300ms (can be slightly slower)
- Never exceed 300ms for hover-in
Exaggeration: Subtle - hover is preview, not performance. Scale max 1.05, shadow max +8px.
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- Character Appeal648
- Playfulness Fun648
- Creative Director631
- Data Visualization629
- Elegance Sophistication629
- Physics Intuition624
- Carousels Sliders620
- Timing Mastery620
- Transition Sequences619
- Education Learning618
- Rive Animations618
- Travel Hospitality611
- Loading States610
- Dramatic 2000ms Plus609
- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
Recommended
More Design & UI/UX
character-appealdylantarre/animation-principlesUse when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must 648skills.sh installsplayfulness-fundylantarre/animation-principlesUse when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.648skills.sh installsdata-visualizationdylantarre/animation-principlesUse when animating charts, graphs, dashboards, data transitions, or any information visualization work.629skills.sh installseducation-learningdylantarre/animation-principlesUse when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences618skills.sh installsrive-animationsdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Rive interactive animations618skills.sh installstravel-hospitalitydylantarre/animation-principlesUse when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences611skills.sh installs