txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add staggered cascade animation to buttons

Browse Source 
Implemented beautiful cascading animation effect where each button
animates individually with a staggered delay.

Changes:
- Each button now has transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
- Added nth-child selectors with progressive delays:
  * Button 1: 0.05s delay
  * Button 2: 0.10s delay
  * Button 3: 0.15s delay
  * Button 4: 0.20s delay
  * Button 5: 0.25s delay

Effect:
When viewport changes (desktop ↔ mobile), buttons don't move as a group.
Instead, they cascade one by one creating a wave-like animation:
- Desktop→Mobile: Buttons flow from vertical to horizontal sequentially
- Mobile→Desktop: Buttons stack from horizontal to vertical one by one

This creates a much cooler, more polished animation than moving all
buttons simultaneously. The 50ms stagger creates perfect visual rhythm.
This commit is contained in:
juanatsap
2025-11-16 14:39:03 +00:00
parent 0edcf8c221
commit 268cd00fc7
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+8 -1
View File
@@ -2861,11 +2861,18 @@ html {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Same smooth easing */
opacity: 0.6; opacity: 0.6;
margin: 0; /* Remove any margins */ margin: 0; /* Remove any margins */
} }
/* Staggered animation delays - each button animates one by one */
.fixed-buttons-container > *:nth-child(1) { transition-delay: 0.05s; }
.fixed-buttons-container > *:nth-child(2) { transition-delay: 0.10s; }
.fixed-buttons-container > *:nth-child(3) { transition-delay: 0.15s; }
.fixed-buttons-container > *:nth-child(4) { transition-delay: 0.20s; }
.fixed-buttons-container > *:nth-child(5) { transition-delay: 0.25s; }
/* Legacy selector for backwards compatibility */ /* Legacy selector for backwards compatibility */
.info-button { .info-button {
background: var(--black-bar); background: var(--black-bar);