Fix gooey animation not working on mobile#40
Merged
vrodriguero merged 18 commits intomainfrom Feb 9, 2026
Merged
Conversation
Clicking the Gooey logo in the sidebar triggers a full-screen green slime splatter overlay (inspired by Mario Kart Blooper ink). The animation drips down from the top and fades out after ~2.4 seconds. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…mation - SVG gooey filter (feGaussianBlur + feColorMatrix) merges shapes into organic blobby forms - Dark-to-light gradient on drips for depth - 10 drips with varying widths, lengths, and staggered bouncy easing - Wavy sludge edge along the top instead of a flat rectangle - Splatter blob circles that pop in with overshoot - Glossy sheen that slides across for that wet slime look - Slower fade-out (1.2s) for a more satisfying exit Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replaces dripping slime with a two-phase animation: 1. Slime sprite plays in the center of the screen using the sprite-slime.png spritesheet (bounce, squish, jump, splat sequence) 2. Once the sprite finishes, green splatter blobs and droplets burst outward from the center in all directions with gooey SVG filter Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Spritesheet was rearranged from 4x4 grid to a single horizontal strip. Updated frame dimensions to 580.25x739 and simplified position calc to horizontal-only offset. Frame sequence plays through the full idle → squish → jump → land → splat cycle. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Sprite now positioned at bottom center of the viewport - Replaced generic SVG blobs with the actual slime-splatter.svg asset - 10 splatter instances scattered across the screen, each with different scale, rotation, and staggered pop-in delay - Splatters use the pixel-art style matching the Gooey brand Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Splatters now all start at the center of the viewport and animate outward to their final positions using CSS custom properties for translate offsets. Previously they were positioned with top/left percentages which pushed them off-screen. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Testing the second sprite variant — 4062x739, 7 frames. Tighter animation sequence: idle → squish → jump → land → particles → spread → scatter. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Testing third sprite variant — 6383x739, 11 frames. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Splatters now fire at frame 4 (jump peak) instead of waiting for the full sprite sequence to finish. Both the sprite and splatters are visible simultaneously — sprite finishes its remaining frames while splatters burst outward from center. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Only sprite-slime-3.png is used. Removing sprite-slime.png and sprite-slime-2.png to avoid confusion. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move click.prevent to the RouterLink instead of the Logo SVG so the navigation event is actually intercepted. Previously the event on the Logo didn't stop the parent RouterLink from navigating to home. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add splat trigger to mobile sidebar logo (closes sheet, navigates home, fires animation) - Add splat trigger to Index page hero logo - Provide splat function via provide/inject for descendant access - Fix splatter centering with translate(-50%, -50%) instead of hardcoded margins - Add separate mobile splatter config with tighter spread and larger scales - Scale sprite down on mobile with flex-shrink: 0 to prevent clipping - Remove .prevent from desktop logo so it also navigates home Closes CL-257 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
vrodriguero
deleted the
vickie/cl-257-fix-gooey-animation-not-working-on-mobile
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
provide/injecttranslate(-50%, -50%)instead of hardcoded pixel margins that broke on smaller viewportsTest plan
Closes CL-257
🤖 Generated with Claude Code