Hover Interactions

dylantarre/animation-principles/skills/05-by-animation-type/hover-interactions

by dylantarre83597134ba8fNo license99 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.

Instructions onlyDesign & Creative

AI-generated overview

Guidance for designing mouse hover animations using Disney's 12 animation principles, with timing tables and CSS patterns.

What it does: Explains how to apply Disney's 12 animation principles to mouse hover states, covering squash and stretch, anticipation, staging, follow-through, easing, and secondary actions. It provides timing recommendations for effects such as color change, scale, shadow, underline draw, image zoom, and icon shift, plus CSS implementation patterns for card lifts, center-out underlines, and icon motion. It also lists rules for responsiveness, mis-click avoidance, and scoping hover effects to pointer devices.
When to use it: Use when creating or refining pointer-triggered hover effects such as button highlights, card lifts, link underlines, or image zooms. Also useful when choosing hover-in and hover-out durations and easing curves, or when ensuring hover behavior degrades correctly on touch devices.
Requirements: No scripts or tools required; instructions only. The agent needs no packages, credentials, or network access.

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.

Solid Drawing: Hover states must feel like the same element elevated, not a replacement.

Appeal: Hover should invite clicking. Create anticipation without demanding action.

Timing Recommendations

Hover Effect	Hover-In	Hover-Out	Easing
Color Change	150ms	200ms	ease-out / ease-in-out
Scale/Lift	200ms	250ms	ease-out / ease-in-out
Shadow	200ms	250ms	ease-out / ease-in-out
Underline Draw	200ms	200ms	ease-out
Image Zoom	300ms	400ms	ease-out
Icon Shift	150ms	200ms	ease-out

Implementation Patterns

css

/* Card lift with shadow */.card {  transition: transform 200ms ease-out, box-shadow 200ms ease-out;}
.card:hover {  transform: translateY(-4px) scale(1.02);  box-shadow: 0 12px 24px rgba(0,0,0,0.15);}
/* Slower return */.card:not(:hover) {  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;}
/* Underline draw from center */.link {  position: relative;}
.link::after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 0;  height: 2px;  background: currentColor;  transition: width 200ms ease-out, left 200ms ease-out;}
.link:hover::after {  width: 100%;  left: 0;}

/* Card lift with shadow */.card {  transition: transform 200ms ease-out, box-shadow 200ms ease-out;}
.card:hover {  transform: translateY(-4px) scale(1.02);  box-shadow: 0 12px 24px rgba(0,0,0,0.15);}
/* Slower return */.card:not(:hover) {  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;}
/* Underline draw from center */.link {  position: relative;}
.link::after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 0;  height: 2px;  background: currentColor;  transition: width 200ms ease-out, left 200ms ease-out;}
.link:hover::after {  width: 100%;  left: 0;}

Icon Animation Pattern

css

.button-icon {  transition: transform 150ms ease-out;}
.button:hover .button-icon {  transform: translateX(4px);}
/* Arrow grows */.arrow-icon {  transition: transform 150ms ease-out;}
.link:hover .arrow-icon {  transform: translateX(4px) scale(1.1);}

.button-icon {  transition: transform 150ms ease-out;}
.button:hover .button-icon {  transform: translateX(4px);}
/* Arrow grows */.arrow-icon {  transition: transform 150ms ease-out;}
.link:hover .arrow-icon {  transform: translateX(4px) scale(1.1);}

Key Rules

Touch devices don't have hover - ensure functionality without it
Hover-in must be under 200ms to feel responsive
Don't move elements enough to cause mis-clicks
Test with @media (hover: hover) to scope to pointer devices
Combine max 3 properties to avoid overwhelming

Source and attribution

Source:dylantarre/animation-principlesinskills/05-by-animation-type/hover-interactionsat commit8359713

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Hover Interactions

Hover Interaction Animations

Principle Application

Timing Recommendations

Implementation Patterns

Icon Animation Pattern

Key Rules

Source and attribution

More from dylantarre/animation-principles

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design