Skip to content

feat: animate StatsModal bars and stat numbers on modal open#42

Open
albert239825 wants to merge 1 commit into
mainfrom
devin/animated-stats
Open

feat: animate StatsModal bars and stat numbers on modal open#42
albert239825 wants to merge 1 commit into
mainfrom
devin/animated-stats

Conversation

@albert239825

@albert239825 albert239825 commented Jun 21, 2026

Copy link
Copy Markdown
Collaborator

Summary

Upgrades the StatsModal win distribution from static bars to animated bars that grow on modal open, plus a count-up animation for the stat numbers.

Bar animation: Added @keyframes growBar that animates width from 0%var(--bar-width). Each Progress row receives a staggered animation-delay via CSS custom property (--stagger-delay: ${index * 0.1}s), so bars cascade in sequentially.

Stat count-up: StatItem now accepts isOpen and uses useState/useEffect to animate the displayed number from 0 → target over ~500ms (20 steps via setInterval). Resets to 0 when the modal closes so it replays on reopen.

// key addition to .line
animation: growBar 0.5s ease-out forwards;
animation-delay: var(--stagger-delay, 0s);
// Progress passes custom properties as inline style
style={{ '--bar-width': `${8 + size}%`, '--stagger-delay': `${index * 0.1}s` }}

Link to Devin session: https://app.devin.ai/sessions/9240699c31bb40fba0e3ff0696399f32
Requested by: @albert239825


Devin Review

Status Commit
⚪ Not started

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

Open in Devin Review (Staging)

- Add @Keyframes growBar animation for win distribution bars
- Add staggered animation-delay via CSS custom properties
- Add count-up animation for stat numbers using useState/useEffect
- Bars grow from 0% to final width with 0.1s stagger per row
- Stat numbers animate from 0 to target value over 500ms

Co-Authored-By: Albert Chen <albert23982@gmail.com>
@devin-ai-integration

Copy link
Copy Markdown

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@devin-ai-integration

Copy link
Copy Markdown

Testing Results

Tested the animated StatsModal locally with npm run start and varied win distribution data in localStorage.

Animation Tests (all passed)
Test Result
Bars animate from 0% → final width with staggered delays ✅ Passed
Stat numbers count up from 0 → target over ~500ms ✅ Passed
Animations reset and replay on modal re-open ✅ Passed

Bar animation proof (CSS inspection):

  • All 6 bars use growBar keyframe animation with 0.5s ease-out forwards
  • Stagger delays: 0s, 0.1s, 0.2s, 0.3s, 0.4s, 0.5s
  • Bar widths proportional: row 3 (value=12) = 98%, row 1 (value=1) = 15.5%

Count-up proof (MutationObserver, 52 captures):

  • t=0ms: [0, 0, 0, 0]
  • t=499ms: [31, 84, 4, 7]

Reset proof:

  • On re-open, bars start at 0px and stats start at [0,0,0,0]
Screenshots

StatsModal final state
Zoomed bar widths


Devin session

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant