Bewegungszustände gestalten
Gestaltet Bewegung als ausdrückliches Interaktionsverhalten, das bei Umkehr, Wiederholung und Unterbrechung stimmig bleibt.
motion-design-states
Teammitglieder mit diesem Skill
Wann ist der Skill hilfreich?
Nutze ihn bei inkonsistenten Animationen oder auseinanderlaufenden sichtbaren und funktionalen Zuständen nach schneller Eingabe.
Wobei hilft er dir?
- Definiert gemeinsame Dauer und Beschleunigung für klare Interaktionsziele.
- Modelliert Hover, Fokus, Drücken sowie Lade- und Fehlerübergänge.
- Behandelt schnelle Wiederholung, Umkehr und unsichtbare Trefferflächen.
Das könntest du fragen
Entwirf ein Seitenpanel, das bei schnellem Öffnen und Schließen flüssig umkehrt. Öffne und schließe mehrfach vor Abschluss. Die Schublade kehrt aus aktueller Position um und hinterlässt keine unsichtbare eingabeabfangende Ebene.
Ausführliche Dokumentation
Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.
Weniger anzeigen
Motion Design & Interaction States
Treat motion as functional communication, not decoration. Every animation must answer at least one user question: Where did this come from? What just changed? Is my action in progress? Where should I look next?
Motion Purpose & Token System
Define a coherent motion scale so transitions feel authored by a single hand across the product:
| Interaction Tier | Typical Duration | Recommended Easing | Distance / Scale Bound | Primary Purpose |
|---|---|---|---|---|
| Micro-feedback (hover, press, focus ring, toggle) | 100ms–160ms |
cubic-bezier(0.2, 0, 0, 1) (ease-out) |
scale(0.97–1.02), translateY(-1px to -2px) |
Immediate tactile acknowledgment |
| Component state change (dropdown, accordion, tab indicator, toast) | 180ms–260ms |
Enter: ease-out cubic-bezier(0.16, 1, 0.3, 1); Exit: ease-in cubic-bezier(0.4, 0, 1, 1) |
8px–24px offset or FLIP layout delta |
Spatial relationship & hierarchy |
| Surface / View transition (drawer, modal, sheet, route crossfade) | 260ms–380ms |
cubic-bezier(0.22, 1, 0.36, 1) or critically damped spring ($\zeta \approx 1$) |
Panel width / bounded viewport delta | Orientation across navigation |
| Narrative / Product showcase (staged hero scene, multi-step walkthrough) | 450ms–900ms per beat |
Custom choreographed curves + staggered 40ms–80ms offsets |
Scene-specific | Guided attention & storytelling |
Asymmetric Enter vs. Exit: Elements entering the user's attention decelerate into rest (ease-out, slightly longer duration); elements dismissing or exiting accelerate out of the way (ease-in, 20–30% shorter duration) so the interface never feels sluggish.
Explicit State & Interruption Matrix
Before writing animation code, specify every state and how mid-flight interruptions behave:
idle$\leftrightarrow$hover/focus-visible$\leftrightarrow$pressed:- Never rely on hover alone to reveal critical actions; ensure keyboard
focus-visibleand touch states expose the same affordances.
- Never rely on hover alone to reveal critical actions; ensure keyboard
- Mid-flight reversal & rapid re-triggering:
- If the user closes a menu or toggles a switch 80ms into a 250ms open animation, reverse smoothly from the current interpolated velocity and position (as CSS transitions, retargeted springs, and GSAP
.reverse()do naturally) rather than snapping to100%before playing the exit.
- If the user closes a menu or toggles a switch 80ms into a 250ms open animation, reverse smoothly from the current interpolated velocity and position (as CSS transitions, retargeted springs, and GSAP
- Pointer-events & hit-target hygiene:
- Disable
pointer-events: noneon exiting elements immediately when dismissal begins so invisible or fading overlays never trap clicks or focus. - Keep the clickable hit box stable during hover scale/transform effects to prevent hover-jitter loops at element edges.
- Disable
- Loading $\rightarrow$ Content $\rightarrow$ Error continuity:
- Reserve final layout dimensions before data arrives (skeletons or aspect-ratio containers) and crossfade or FLIP into the loaded state so content never jumps under the user's pointer.
Enthaltene Dateien 1
SKILL.md