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

fix: enable staggered button animations with specific property transitions

Browse Source 
The issue was that 'transition: all' on the container was forcing all
buttons to move together. Fixed by:

1. Container now transitions only: left, bottom, gap, transform
   (NOT flex-direction or all properties)

2. Buttons transition only: transform, opacity, background-color, box-shadow, color
   (NOT all properties)

3. Increased stagger delays for better visual effect:
   - Button 1: 0s (instant)
   - Button 2: 0.08s
   - Button 3: 0.16s
   - Button 4: 0.24s
   - Button 5: 0.32s

4. Added flex-direction: 0s transition in mobile to instant switch direction
   while buttons still cascade to new positions

Result: Each button now animates independently with cascading wave effect
when switching between desktop (vertical) and mobile (horizontal) layouts.
This commit is contained in:
juanatsap
2025-11-16 14:42:40 +00:00
parent 268cd00fc7
commit 5a99c0026e
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+23 -8
View File
@@ -2835,7 +2835,11 @@ html {
gap: 1rem; /* 16px gap between buttons */
align-items: center;
z-index: 99;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth morphing transition */
/* Container transitions only position/gap - NOT flex-direction to avoid overriding button animations */
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* All buttons inside container - shared styles */
@@ -2861,17 +2865,22 @@ html {
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Same smooth easing */
/* Transition specific properties for stagger effect */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
background-color 0.3s ease,
box-shadow 0.3s ease,
color 0.3s ease;
opacity: 0.6;
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; }
/* Staggered animation delays - each button moves independently */
.fixed-buttons-container > *:nth-child(1) { transition-delay: 0s; }
.fixed-buttons-container > *:nth-child(2) { transition-delay: 0.08s; }
.fixed-buttons-container > *:nth-child(3) { transition-delay: 0.16s; }
.fixed-buttons-container > *:nth-child(4) { transition-delay: 0.24s; }
.fixed-buttons-container > *:nth-child(5) { transition-delay: 0.32s; }
/* Legacy selector for backwards compatibility */
.info-button {
@@ -2963,6 +2972,12 @@ html {
transform: translateX(-50%); /* Center the container */
bottom: 1.5rem;
gap: 10px; /* Smaller gap on mobile */
/* Add flex-direction to transition for smooth morph */
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
flex-direction 0s; /* Instant flex-direction change, but buttons stagger */
}
/* Buttons maintain same size and styles from desktop */