ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 12:15:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust animation timing

Browse Source
This commit is contained in:
akcodez
2025-02-18 11:15:15 -08:00
parent a6506522ff
commit 137e9b47dc
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
@theme/components/Navbar/Navbar.tsx
View File

@@ -24,15 +24,11 @@ export function AlertBanner({ message, button, link, show }) {
React.useEffect(() => { React.useEffect(() => {
const banner = bannerRef.current; const banner = bannerRef.current;
if (!banner) return; if (!banner) return;
// Define the event handler
const handleMouseEnter = () => { const handleMouseEnter = () => {
banner.classList.add('has-hover'); banner.classList.add('has-hover');
}; };
// Attach the event listener // Attach the event listener
banner.addEventListener('mouseenter', handleMouseEnter); banner.addEventListener('mouseenter', handleMouseEnter);
// Clean up the event listener on unmount // Clean up the event listener on unmount
return () => { return () => {
banner.removeEventListener('mouseenter', handleMouseEnter); banner.removeEventListener('mouseenter', handleMouseEnter);

2
static/css/devportal2024-v1.css
View File

File diff suppressed because one or more lines are too long

8
styles/_top-banner.scss
View File

@@ -14,6 +14,7 @@
color: $white; color: $white;
.button-icon{ .button-icon{
animation: iconJitter 1s ease-in-out forwards; animation: iconJitter 1s ease-in-out forwards;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
} }
} }
color: $white !important; color: $white !important;
@@ -35,13 +36,14 @@
z-index: 0; z-index: 0;
transform: scaleX(0); // Start scaled down to 0 transform: scaleX(0); // Start scaled down to 0
transform-origin: left; // Scale from the left edge transform-origin: left; // Scale from the left edge
transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.7s cubic-bezier(0.7, 0, 0.84, 0);
will-change: transform; // Hint for smoother animations will-change: transform; // Hint for smoother animations
} }
// On hover, scale to full width // On hover, scale to full width
&:hover::after { &:hover::after {
transform: scaleX(1); transform: scaleX(1);
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
} }
// Ensure direct children are above the pseudo-element // Ensure direct children are above the pseudo-element
> * { > * {
@@ -107,7 +109,7 @@
width: 12.5px; // Scaled down from 13.8px width: 12.5px; // Scaled down from 13.8px
animation: none; animation: none;
transform: rotateZ(0deg); transform: rotateZ(0deg);
transition: transform 0.5s ease-in-out; // Adjust duration as needed transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); // Adjust duration as needed
@media (max-width: 524px) { @media (max-width: 524px) {
width: 9px; // Scaled down from 10px width: 9px; // Scaled down from 10px
} }
@@ -151,6 +153,7 @@
.button-icon { .button-icon {
animation: iconJitter 1s ease-in-out; animation: iconJitter 1s ease-in-out;
animation-iteration-count: 1; animation-iteration-count: 1;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
} }
@keyframes iconReturn { @keyframes iconReturn {
from { from {
@@ -163,4 +166,5 @@
/* After the banner has been hovered once, on unhover run the reverse animation */ /* After the banner has been hovered once, on unhover run the reverse animation */
.web-banner.has-hover:not(:hover) .button-icon { .web-banner.has-hover:not(:hover) .button-icon {
animation: iconReturn 1s ease-in-out forwards; animation: iconReturn 1s ease-in-out forwards;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
} }