Micro 100 200ms
This covers the goldilocks zone for UI micro-interactions where animations are fast enough to feel snappy but slow enough to register as intentional. You get specific guidance on applying Disney animation principles at micro scale (spoiler: most don't work here), easing function recommendations, and practical CSS patterns for tooltips, dropdowns, and hover states. The 100-200ms range is where polish lives, those animations users don't consciously notice but definitely feel when they're missing. The best insight here is treating these as felt rather than watched, which changes how you think about the details. If you're building modern interfaces and want that smooth, premium feel without overthinking timing curves, this gives you the constraints and patterns to work within.
- skills.sh installs
- 564
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill micro-100-200ms --agent claude-codeInstalls into .claude/skills of the current project.
Files
Micro Animations (100-200ms)
The 100-200ms range is the sweet spot for micro-interactions. Fast enough to feel responsive, slow enough to be perceived as intentional motion.
Disney Principles at Micro Speed
Works Well
Squash & Stretch: Light application - 5-10% works for bouncy buttons, appearing elements.
Anticipation: Micro-anticipation possible - 20-30ms wind-up before 150ms action.
Staging: Single focal point - one element moving, rest static.
Straight Ahead/Pose to Pose: Either works - simple enough for straight ahead, controlled enough for poses.
Follow Through: Minimal overshoot - 2-5% past target, settle quickly.
Slow In/Slow Out: ease-out dominates - elements should arrive confidently.
Arcs: Slight curves possible - dropdown items can arc subtly rather than straight down.
Secondary Action: One secondary max - icon rotates while menu opens.
Timing: 6-12 frames at 60fps. Enough for smooth motion.
Exaggeration: Moderate - scale 0.9-1.1, rotation up to 30 degrees.
Solid Drawing: Simple transforms - scale, opacity, short translations.
Appeal: Quick animations feel modern and polished.
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- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
Recommended
More Design & UI/UX
performance-optimizationdylantarre/animation-principlesUse when animation runs slow, janky, or causes frame drops562skills.sh installsreact-springdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with React Spring's physics-based animations562skills.sh installscards-containersdylantarre/animation-principlesUse when animating cards, panels, tiles, or container elements to create depth and interactivity557skills.sh installsuniversal-emotiondylantarre/animation-principlesUse when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.556skills.sh installsexit-animationsdylantarre/animation-principlesUse when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.547skills.sh installsaccordions-dropdownsdylantarre/animation-principlesUse when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions545skills.sh installs