When to Animate

Situation	Why	Pattern
Content enters the viewport	Draws attention to new content	`ScrollReveal` with `fadeUp`
User navigates between pages	Provides spatial continuity	`PageTransition` with `slide`
Data loads asynchronously	Reduces perceived wait time	`SkeletonLoader` → `ContentSwap`
User interacts with an element	Confirms the interaction was received	`whileHover` + `whileTap`
A value changes	Shows the change, not just the result	`AnimatedCounter`
Items are added/removed	Prevents jarring layout shifts	`AnimatePresence` + exit variants
State toggles	Shows the transition between states	`layout` animation

Situation	Why
The user is typing	Animations near text input are distracting
Form validation errors appear	Users need to read errors, not watch them bounce
Data is already visible	Re-animating visible content feels like lag
Multiple elements need attention	Too many simultaneous animations cause chaos
The action is destructive	Delete confirmations should feel deliberate, not flashy
Network requests are in-flight	Don't animate loading states that may flash briefly

If an animation takes longer than 3 seconds to complete (including stagger), it's too long. Users lose patience after 3 seconds. The ideal animation:

Included with Animation & Effects Pack