mirror of
https://github.com/garrytan/gstack.git
synced 2026-11-09 10:18:32 +01:00
fix(design): exits ease out, never ease in (GST-1240) (#3963)
/design-consultation wrote exit(ease-in) into DESIGN.md and /design-review checked against the same rule, so a laggy exit was generated and never flagged. Rewrite of #3900. Co-authored-by: Nick Fitzsimmons <2198211+nfitzsimmons@users.noreply.github.com> Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
This commit is contained in:
6 files changed
+11
-5
No files matched your search
@@ -119,7 +119,7 @@ rounded:
|
||||
## Motion
|
||||
|
||||
- **Approach:** Minimal-functional — only transitions that aid comprehension. The dashboard's live feed IS the motion.
|
||||
- **Easing:** enter(ease-out / cubic-bezier(0.16,1,0.3,1)) exit(ease-in) move(ease-in-out)
|
||||
- **Easing:** enter(ease-out / cubic-bezier(0.16,1,0.3,1)) exit(ease-out) move(ease-in-out)
|
||||
- **Duration:** micro(50-100ms) short(150ms) medium(250ms) long(400ms)
|
||||
- **Animated elements:** live feed dot pulse (2s infinite), skill bar fill (600ms ease-out), hover states (150ms)
|
||||
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
**Design exits ease out, never ease in (GST-1240).** `/design-consultation` wrote `exit(ease-in)` into every DESIGN.md it made, and `/design-review` checked against the same rule, so an exit that lags was both generated and never flagged. Ease-in starts slow at the moment the user is watching, so a dismissal, menu close or toast exit reads as lag. Rewrite of #3900 by @nfitzsimmons.
|
||||
|
||||
### Fixed
|
||||
- **`/design-review` motion checklist:** ease-out to enter and exit, ease-in-out to move, and flag plain ease-in. The new line is one byte longer than the old one, so /design-review stays inside its size cap.
|
||||
- **`/design-consultation` DESIGN.md template:** `exit(ease-in)` becomes `exit(ease-out)`.
|
||||
- **gstack's own `DESIGN.md`:** the motion easing matches, `exit(ease-out)`.
|
||||
@@ -567,7 +567,7 @@ components:
|
||||
## Motion
|
||||
|
||||
- **Approach:** [minimal-functional / intentional / expressive]
|
||||
- **Easing:** enter(ease-out) exit(ease-in) move(ease-in-out)
|
||||
- **Easing:** enter(ease-out) exit(ease-out) move(ease-in-out)
|
||||
- **Duration:** micro(50-100ms) short(150-250ms) medium(250-400ms) long(400-700ms)
|
||||
- **The one authored moment:** [what it is]
|
||||
|
||||
|
||||
@@ -322,7 +322,7 @@ components:
|
||||
## Motion
|
||||
|
||||
- **Approach:** [minimal-functional / intentional / expressive]
|
||||
- **Easing:** enter(ease-out) exit(ease-in) move(ease-in-out)
|
||||
- **Easing:** enter(ease-out) exit(ease-out) move(ease-in-out)
|
||||
- **Duration:** micro(50-100ms) short(150-250ms) medium(250-400ms) long(400-700ms)
|
||||
- **The one authored moment:** [what it is]
|
||||
|
||||
|
||||
@@ -676,7 +676,7 @@ Apply these at each page. Each finding gets an impact rating (high/medium/polish
|
||||
- No `user-scalable=no` or `maximum-scale=1` in viewport meta
|
||||
|
||||
**7. Motion & Animation** (7 items)
|
||||
- Easing: ease-out for entering, ease-in for exiting, ease-in-out for moving
|
||||
- Easing: ease-out to enter and exit, ease-in-out to move; flag plain ease-in
|
||||
- Duration: 50-700ms range (nothing slower unless page transition)
|
||||
- Purpose: every animation communicates something (state change, attention, spatial relationship)
|
||||
- `prefers-reduced-motion` respected (check: `await pg.evaluate(() => matchMedia("(prefers-reduced-motion: reduce)").matches)`)
|
||||
|
||||
@@ -344,7 +344,7 @@ Apply these at each page. Each finding gets an impact rating (high/medium/polish
|
||||
- No \`user-scalable=no\` or \`maximum-scale=1\` in viewport meta
|
||||
|
||||
**7. Motion & Animation** (7 items)
|
||||
- Easing: ease-out for entering, ease-in for exiting, ease-in-out for moving
|
||||
- Easing: ease-out to enter and exit, ease-in-out to move; flag plain ease-in
|
||||
- Duration: 50-700ms range (nothing slower unless page transition)
|
||||
- Purpose: every animation communicates something (state change, attention, spatial relationship)
|
||||
- \`prefers-reduced-motion\` respected (check: \`await pg.evaluate(() => matchMedia("(prefers-reduced-motion: reduce)").matches)\`)
|
||||
|
||||
Reference in new issue
Block a user