scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-06 08:18:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🐛 Fix glitchy kangaroo bounce animation on welcome screen

Browse source 
The kangaroo logo on the welcome screen had a visual glitch where it would instantly jump to the top position when hovering, instead of smoothly starting the bounce from its resting position.

Changes:
- Added custom smooth-bounce keyframe animation in index.css that explicitly starts from translateY(0)
- Updated RooHero component to use hover state tracking with the new animation
- Removed Tailwind's animate-bounce class which was causing the glitch

The animation now smoothly bounces from the resting position without any jarring visual jumps.
This commit is contained in:
Danny Ricciotti 2025-12-11 16:20:39 -05:00 • committed by Roo Code
parent e3b90fb182
commit b9e2becd13
2 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webview-ui/src/components/welcome/RooHero.tsx
View file

@ -5,9 +5,13 @@ const RooHero = () => {
const w = window as any
return w.IMAGES_BASE_URI || ""
})
const [isHovered, setIsHovered] = useState(false)
return (
<div className="mb-4 relative forced-color-adjust-none group flex flex-col items-center w-30 pt-4 overflow-clip">
<div
className="mb-4 relative forced-color-adjust-none group flex flex-col items-center w-30 pt-4 overflow-clip"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<div
style={{
backgroundColor: "var(--vscode-foreground)",
@ -17,8 +21,9 @@ const RooHero = () => {
maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
maskRepeat: "no-repeat",
maskSize: "contain",
animation: isHovered ? "smooth-bounce 1s ease-in-out infinite" : "none",
}}
className="z-5 mr-auto group-hover:animate-bounce translate-y-0 transition-transform duration-500">
className="z-5 mr-auto translate-y-0 transition-transform duration-500">
<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
</div>
<div

23
webview-ui/src/index.css
View file

@ -205,6 +205,29 @@
.history-item-highlight {
@apply underline;
}
/* Custom smooth bounce animation for Roo hero */
@keyframes smooth-bounce {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-25%);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-12.5%);
}
100% {
transform: translateY(0);
}
}
.animate-smooth-bounce {
animation: smooth-bounce 1s ease-in-out infinite;
}
}
/* Form Element Focus States */