Mozgási állapotok tervezése
Kifejezett interakciós működésként tervezi a mozgást, amely irányváltás, ismétlés és megszakítás esetén is következetes.
motion-design-states
Nézd meg, miben segítMikor hasznos?
Akkor használd, ha az animáció következetlen vagy gyors bemenet után eltér a vizuális és működési állapot.
Miben segít neked?
- Világos interakciós célhoz közös időzítést és gyorsulási görbét rendel.
- Modellezi a rámutatás, fókusz, lenyomás, betöltés és hiba átmenetét.
- Kezeli a gyors újraindítást, irányváltást és láthatatlan kattintási területet.
Például ezt kérheted
Tervezz gyors nyitásra-zárásra is folytonosan visszaforduló oldalsó panelt. Befejezés előtt többször nyisd és zárd. A fiók aktuális helyéről forduljon vissza, ne maradjon láthatatlan, bevitelt elfogó réteg.
Részletes dokumentáció
Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.
Összecsukás
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.
Csomagban lévő fájlok 1
SKILL.md