Microinteractions, animations, transitions, easing, and feedback systems for game feel. Use when implementing UI animations, game juice, state transitions, or visual feedback in games.
Interactions are the moments when your interface comes alive. They're the transitions between states, the feedback when users take action, the animations that guide attention. When done well, interactions are invisible—they feel natural and right. When done poorly, they distract or confuse.
This skill teaches you to think about interactions systematically: understanding animation principles, designing intentional microinteractions, providing clear feedback, and ensuring performance and accessibility.
A microinteraction is a small, contained interaction that accomplishes a specific task. Examples: button hover state, form validation feedback, loading spinner, success notification, menu open/close.
Every microinteraction has four parts:
Example: Button Hover State
Trigger: User hovers over button
Rules:
- Background color changes to darker shade
- Duration: 200ms
- Easing: ease-out
Feedback:
- Visual: background color transition
- Indicates: button is interactive
Loops & Modes:
- Repeats on every hover
- Can be interrupted by click or mouse leave
Principle 1: Provide Feedback Every user action should result in visible feedback. Users need to know their action was registered.
Principle 2: Guide Attention Use animation to guide users' attention to important elements.
Principle 3: Communicate State Use animation to communicate state changes (loading, success, error, etc.).
Principle 4: Delight Without Distraction Add personality and delight, but don't distract from the task.
Timing is critical. Too fast and the animation feels abrupt. Too slow and it feels sluggish.
General Guidelines:
/* UI Feedback - Fast */
button {
transition: background-color 200ms ease-out;
}
/* Transitions - Medium */
.modal {
transition: opacity 400ms ease-out, transform 400ms ease-out;
}
/* Loading - Slower */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
Easing functions control how an animation accelerates and decelerates. Different easing functions convey different meanings.
Common Easing Functions:
| Easing | Meaning | Use Case |
|---|---|---|
linear | Constant speed | Continuous, mechanical (spinners, progress bars) |
ease-in | Slow start, fast end | Exiting, dismissing |
ease-out | Fast start, slow end | Entering, appearing, most interactions |
ease-in-out | Slow start and end | Smooth, natural transitions |
cubic-bezier(0.34, 1.56, 0.64, 1) | Elastic, bouncy | Playful, attention-grabbing |
/* UI Feedback - ease-out (most common) */
button {
transition: background-color 200ms ease-out;
}
/* Entering - ease-out */
.modal {
animation: slideIn 400ms ease-out;
}
/* Exiting - ease-in */
.modal.closing {
animation: slideOut 300ms ease-in;
}
/* Continuous - linear */
.spinner {
animation: spin 1s linear infinite;
}
/* Playful - cubic-bezier */
.bounce {
animation: bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
The distance an element moves affects how long the animation should take. Larger distances need longer durations.
/* Small movement - short duration */