Icons Badges
This breaks down Disney's 12 animation principles specifically for UI icons, badges, and status indicators. You get concrete timing recommendations (hover scales in 100-150ms, badge bounces in 300-400ms) and ready-to-use CSS for common patterns like bell ring animations, notification badge bounces, and status pulses. The principle-by-principle breakdown is genuinely helpful because it explains why a heart should squash and stretch on tap or why a bell needs anticipation before ringing. The timing guidance alone saves you from the usual trial and error. Best for when you want your micro-interactions to feel polished without over-engineering them.
- skills.sh installs
- 581
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill icons-badges --agent claude-codeInstalls into .claude/skills of the current project.
Files
Icon & Badge Animation Principles
Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.
Principles Applied to Icons
1. Squash & Stretch
Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.
2. Anticipation
Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.
3. Staging
Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.
4. Straight Ahead & Pose to Pose
Simple icons use pose-to-pose (two states). Complex icon animations (morphing) can use straight-ahead for organic transitions.
5. Follow Through & Overlapping Action
Bell ring continues after user interaction stops. Badge number updates before badge bounce settles. Multi-part icons offset timing.
6. Ease In & Ease Out
Icon hover: ease-out. Icon click: ease-in-out. Bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55) for overshoot.
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- Staging Mastery581
- Gesture Responses579
- 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
Recommended
More Design & UI/UX
arc-masterydylantarre/animation-principlesUse when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.578skills.sh installsfollow-through-overlappingdylantarre/animation-principlesUse when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.578skills.sh installsslow-in-out-masterydylantarre/animation-principlesUse when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.572skills.sh installsspatial-thinkingdylantarre/animation-principlesUse when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or mainta572skills.sh installsanticipation-payoffdylantarre/animation-principlesUse when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.568skills.sh installstiming-principle-masterydylantarre/animation-principlesUse when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.565skills.sh installs