awesome-bookmarks/goose
3
0
Fork 0
mirror of https://github.com/block/goose.git synced 2026-07-17 12:56:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Simplify tile animation to eliminate flicker

Browse Source 
Simplified CSS animation approach:
- Set initial opacity and transform explicitly to match keyframe 0%
- Use animation-fill-mode: both to maintain states
- Force exit state with !important to prevent flash
- Removed complex will-change and @supports rules
- Cleaner, more predictable animation behavior

This ensures tiles start at the exact animation beginning state,
preventing any visible flash or flicker during the swoop-in effect.
This commit is contained in:
spencrmartin
2026-01-13 14:57:53 -05:00
parent af25f38b1b
commit b074f388da
1 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/styles/main.css
+8 -12
View File
@@ -927,23 +927,19 @@ p > code.bg-inline-code {
/* Navigation tile stagger animation with enhanced easing */
.nav-tile {
animation: nav-tile-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
/* Start invisible, animation will make visible */
animation: nav-tile-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
animation-fill-mode: both;
/* Start at the first keyframe to prevent flash */
opacity: 0;
/* Prevent flickering by hinting to browser */
will-change: opacity, transform;
}
/* Remove will-change after animation completes to save resources */
.nav-tile.animation-complete {
will-change: auto;
transform: translateY(24px) scale(0.92);
}
.nav-tile-exit {
animation: nav-tile-out 0.2s ease-in forwards;
/* Ensure we start from visible state when exiting */
animation: nav-tile-out 0.2s ease-in;
animation-fill-mode: both;
/* Override to ensure we start from visible state */
opacity: 1 !important;
will-change: opacity, transform;
transform: translateY(0) scale(1) !important;
}
/* Enhanced stagger delays with better rhythm - faster start, gradual slowdown */