Nav pill slide animation #39

2026-10-03T18:45:18-04:00

dev_agent commented

2026-10-03 18:45:18 -04:00

Task: d340ae00-3c2a-48cf-9ac6-35e0b8ed5a7c Nav pill slide animation.

What changed: the mobile bottom nav uses one shared absolutely positioned grape pill and Web Animations API FLIP (420 ms spring), label fade (220 ms, 120 ms delay), icon colour transition .2s, resize and fonts.ready recompute, and an instant jump under reduced motion.

Why: Feature 05 task 6. Motion section 1 of the handoff.

Done-condition: Vitest spies on Element.animate for durations, easings, delay and the reduced-motion path. Local lint:colors, typecheck, test (20 files, 174 tests) and build passed. Developer also exercised headless Chrome; independent review still required.

Base: feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation at 998658b42c.
Head: 004a81b854

Task: d340ae00-3c2a-48cf-9ac6-35e0b8ed5a7c Nav pill slide animation. What changed: the mobile bottom nav uses one shared absolutely positioned grape pill and Web Animations API FLIP (420 ms spring), label fade (220 ms, 120 ms delay), icon colour transition .2s, resize and fonts.ready recompute, and an instant jump under reduced motion. Why: Feature 05 task 6. Motion section 1 of the handoff. Done-condition: Vitest spies on Element.animate for durations, easings, delay and the reduced-motion path. Local lint:colors, typecheck, test (20 files, 174 tests) and build passed. Developer also exercised headless Chrome; independent review still required. Base: feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation at 998658b42c858abe65b1fec8fed4f5d09ab5fc63. Head: 004a81b854509cb78e293e844cc4103f324ba6ca

dev_agent added 1 commit 2026-10-03 18:45:18 -04:00

Slide one shared grape pill between mobile nav items

CI / ci (pull_request) Successful in 1m32s

Details

CI / ci (push) Successful in 1m31s

Details

004a81b854

The mobile bottom bar now draws a single absolutely positioned grape pill
(top 10 px, height 42 px) behind its items and implements handoff Motion
section 1: on a tab change it slides the pill from the old item's left and
width to the new one's over 420 ms on the --ease-spring curve, FLIPs every
moved item with the same timing, and fades the new label in (220 ms
ease-out after 120 ms). Icon colour crossfades via transition color .2s.
Under prefers-reduced-motion the pill jumps with no animation. The pill is
re-placed on resize and once document.fonts.ready resolves. Each item
keeps the full 62 px bar height as its tap target.

Maestro task d340ae00-3c2a-48cf-9ac6-35e0b8ed5a7c

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dev_agent added 1 commit 2026-10-03 18:49:16 -04:00

Start a slide from the pill's on-screen position and stop it on resize

CI / ci (push) Successful in 1m32s

Details

Independent review Codex gpt-6-sol high: APPROVED (0 findings)

Details

CI / ci (pull_request) Successful in 1m32s

Details

06041c8458

A second tab change during the 420 ms slide now measures where the pill
and items are drawn (bounding boxes, which include the running animation)
before cancelling the running pill slide and item FLIPs, and starts the
next slide from there rather than from the previous destination. Resize and
document.fonts.ready also cancel any running slide before re-placing the
pill, so it sits on the active item immediately instead of being held by
the old keyframes. Tests cover both interruptions; timing, label fade and
the reduced-motion jump are unchanged.

Maestro task d340ae00-3c2a-48cf-9ac6-35e0b8ed5a7c

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

review_agent approved these changes

2026-10-03 18:51:27 -04:00

review_agent left a comment

Independent review — Codex `gpt-6-sol`, reasoning high

Verdict: APPROVED
Reviewed SHA: 06041c8458b67187be6577852eeb70d5cab4da32

{
  "verdict": "APPROVED",
  "reviewed_sha": "06041c8458b67187be6577852eeb70d5cab4da32",
  "summary": "The shared pill, animation timing, reduced-motion path, resize and font repositioning, and 62 px tap targets match the task. The round 1 interruption cases are addressed by measuring current geometry before canceling animations and placing the pill immediately on resize. Color lint and git diff checks passed. Web typecheck, tests, and build could not run because node_modules is absent; no dependencies were installed.",
  "findings": []
}

Posted unaltered by review_agent. This is transport, not a second review.

## Independent review — Codex `gpt-6-sol`, reasoning high Verdict: **APPROVED** Reviewed SHA: `06041c8458b67187be6577852eeb70d5cab4da32` ```json { "verdict": "APPROVED", "reviewed_sha": "06041c8458b67187be6577852eeb70d5cab4da32", "summary": "The shared pill, animation timing, reduced-motion path, resize and font repositioning, and 62 px tap targets match the task. The round 1 interruption cases are addressed by measuring current geometry before canceling animations and placing the pill immediately on resize. Color lint and git diff checks passed. Web typecheck, tests, and build could not run because node_modules is absent; no dependencies were installed.", "findings": [] } ``` --- Posted unaltered by `review_agent`. This is transport, not a second review.

approver_agent merged commit c899f07b1f into feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation

2026-10-03 18:52:59 -04:00

dev_agent referenced this pull request

2026-10-04 08:48:31 -04:00

Feature 05: Frontend foundation and design system #43

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Maniacs_Mansion/MealQuest#39

Nav pill slide animation #39

Independent review — Codex gpt-6-sol, reasoning high

Independent review — Codex `gpt-6-sol`, reasoning high