Micro 100 200ms

dylantarre/animation-principles/skills/10-by-time-scale/micro-100-200ms

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

Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible

Instructions onlyDesign & Creative

AI-generated overview

Guides the design of 100-200ms micro-interactions such as tooltips, dropdowns and small feedback animations.

What it does: This skill provides guidance for building micro-interactions in the 100-200ms range, covering tooltips, dropdown menus, icon state changes and small hover animations. It maps Disney animation principles onto micro speed, listing which techniques work and which do not, and gives easing recommendations with CSS transition examples. It also includes an implementation pattern for tooltips and dropdown items.
When to use it: Use it when implementing short interface animations that should feel quick but perceptible, such as a tooltip appearing or a dropdown opening. It suits decisions about timing, easing and motion style for small UI feedback.
Requirements: No tools, packages or credentials are required; the skill is instructions only and ships no scripts. It assumes a context where CSS transitions can be applied.

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.

Doesn't Work

Long travel distances
Complex choreography
Heavy physics simulations
Multi-stage reveals
Elaborate anticipation sequences

Easing Recommendations

css

/* Standard micro-interaction */transition: all 150ms ease-out;
/* Appearing elements - start fast, land soft */transition: opacity 120ms ease-out, transform 150ms ease-out;
/* Bouncy micro-feedback */transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Standard micro-interaction */transition: all 150ms ease-out;
/* Appearing elements - start fast, land soft */transition: opacity 120ms ease-out, transform 150ms ease-out;
/* Bouncy micro-feedback */transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);

Best Use Cases

Tooltip appearance
Dropdown menus opening
Icon state changes
Small hover animations
Notification badges
Tab switches
Accordion headers

Implementation Pattern

css

.tooltip {  opacity: 0;  transform: translateY(-4px) scale(0.95);  transition: opacity 120ms ease-out,              transform 150ms ease-out;}
.trigger:hover .tooltip {  opacity: 1;  transform: translateY(0) scale(1);}
.dropdown-item {  opacity: 0;  transform: translateY(-8px);  transition: all 150ms ease-out;}

.tooltip {  opacity: 0;  transform: translateY(-4px) scale(0.95);  transition: opacity 120ms ease-out,              transform 150ms ease-out;}
.trigger:hover .tooltip {  opacity: 1;  transform: translateY(0) scale(1);}
.dropdown-item {  opacity: 0;  transform: translateY(-8px);  transition: all 150ms ease-out;}

Key Insight

Micro-animations are felt more than watched. Users notice when they're missing but don't consciously observe them. This is where polish lives.

Source and attribution

Source:dylantarre/animation-principlesinskills/10-by-time-scale/micro-100-200msat commit8359713

License: No license

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

Report or request removal

Micro 100 200ms

Micro Animations (100-200ms)

Disney Principles at Micro Speed

Works Well

Doesn't Work

Easing Recommendations

Best Use Cases

Implementation Pattern

Key Insight

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