home / skills / dylantarre / animation-principles / ux-friction
This skill helps identify and reduce ux friction caused by animations by applying timing, anticipation, and attention guidance principles to improve usability.
npx playbooks add skill dylantarre/animation-principles --skill ux-frictionReview the files below or copy the command above to add this skill to your agents.
---
name: ux-friction
description: Use when animation causes user confusion, delays task completion, or creates frustration
---
# UX Friction
Diagnose animations that block, confuse, or frustrate users.
## Problem Indicators
- Users wait for animations to finish
- Confusion about what happened
- Repeated clicks/taps during animation
- Users skip or abandon tasks
- "Where did that go?" moments
## Diagnosis by Principle
### Timing
**Issue**: Animation too slow for the context
**Fix**: Match duration to user intent. Micro-interactions: 100-200ms. Transitions: 200-400ms. Never block input.
### Anticipation
**Issue**: Action happens without warning
**Fix**: Add subtle anticipation cues before significant changes. A button press should show feedback before the result.
### Follow Through
**Issue**: Animation ends abruptly
**Fix**: Let elements settle naturally. Sudden stops feel broken. Add slight overshoot and settle.
### Staging
**Issue**: Important changes happen outside focus
**Fix**: Draw attention to where change occurs. If content moves, guide the eye with motion.
### Appeal
**Issue**: Animation feels arbitrary
**Fix**: Every animation should have clear purpose. If users question "why does this bounce?", remove it.
## Quick Fixes
1. **Make animations skippable** - Click/tap should complete or skip
2. **Reduce duration by 30%** - Most animations are too slow
3. **Add progress indicators** - For anything over 400ms
4. **Animate in user's focus area** - Don't move things peripherally
5. **Remove decorative animations** - If it doesn't help, it hurts
## Troubleshooting Checklist
- [ ] Can users interact during animation?
- [ ] Is duration under 400ms for transitions?
- [ ] Does animation communicate state change?
- [ ] Is the animation skippable if lengthy?
- [ ] Does motion guide attention correctly?
- [ ] Is there feedback for user input?
- [ ] Would removing animation hurt understanding?
- [ ] Test with impatient users (click rapidly)
## Pattern
```js
// Allow interaction during animation
element.style.pointerEvents = 'auto';
// Make animation skippable
element.addEventListener('click', () => {
element.getAnimations().forEach(a => a.finish());
});
```
This skill diagnoses and fixes animation-related UX friction that blocks, confuses, or frustrates users. It applies practical rules from animation principles to speed up interactions, clarify state changes, and prevent users from waiting or repeating actions. Use it to evaluate animations across timing, anticipation, follow-through, staging, and appeal.
The skill inspects animations for common problems: excessive duration, lack of input feedback, abrupt stops, off-focus motion, and decorative or unexplained effects. It recommends concrete fixes—making animations skippable, shortening durations, adding progress or anticipation cues, and ensuring animations occur where the user is looking. It also provides a short troubleshooting checklist and code patterns to allow interaction during animations and to finish animations on user input.
How fast should animations be?
Keep micro-interactions 100–200ms and transitions 200–400ms; reduce by ~30% if they feel sluggish.
What if an animation is important for comprehension?
Keep it, but ensure it’s timely, in the user’s focus, skippable, and paired with clear state feedback or progress.