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

fix: use CSS Grid for true staggered button animations

Browse Source 
Switched from Flexbox to CSS Grid to enable true staggered animations.

Why Grid works better:
- Grid children maintain their grid cell during layout changes
- Buttons can transition individually within their cells
- grid-auto-flow change doesn't force simultaneous repositioning

Changes:
- Container: display: grid with grid-auto-flow
- Desktop: grid-auto-flow: row (vertical stack)
- Mobile: grid-auto-flow: column (horizontal row)
- Buttons: transition: all 0.5s with staggered delays (0s, 0.08s, 0.16s, 0.24s, 0.32s)

Result: Each button now cascades independently when resizing between
desktop and mobile layouts, creating the smooth wave effect.
This commit is contained in:
juanatsap
2025-11-16 14:45:13 +00:00
parent 5a99c0026e
commit d4ef91b742
1 changed files with 8 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+8 -28
View File
@@ -2830,16 +2830,11 @@ html {
position: fixed;
left: 2rem; /* LEFT SIDE - buttons grow bottom to top */
bottom: 2rem;
display: flex;
flex-direction: column;
display: grid; /* Use grid instead of flex for better control */
grid-auto-flow: row; /* Stack vertically */
gap: 1rem; /* 16px gap between buttons */
align-items: center;
justify-items: center;
z-index: 99;
/* 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 */
@@ -2850,10 +2845,6 @@ html {
.fixed-buttons-container .print-friendly-btn,
.fixed-buttons-container .download-btn {
position: relative !important; /* Override fixed positioning */
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 50px;
height: 50px;
background: var(--black-bar);
@@ -2865,17 +2856,13 @@ html {
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
/* 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 */
margin: 0;
/* Each button transitions independently with stagger */
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Staggered animation delays - each button moves independently */
/* Staggered animation delays - creates cascading wave effect */
.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; }
@@ -2966,18 +2953,11 @@ html {
/* Change container to horizontal layout at bottom center */
.fixed-buttons-container {
flex-direction: row; /* Horizontal on mobile */
right: auto;
grid-auto-flow: column; /* Horizontal on mobile */
left: 50%;
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 */