Oliver/ODOO4projects.com
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GSAP for all animations, 3x slower, brighter city images

Browse Source 
- Added GSAP 3.12.5 from CDN
- Card stagger entrance now uses gsap.fromTo with 0.6s duration, 0.09 stagger
- Carousel slide uses gsap.timeline: old slides out right (3s), new slides
  in from right (3s), label slides in (2.5s after 0.3s offset)
- All animations use power2.out easing
- Image brightness: opacity 0.12→0.25, filter brightness(1.15) saturate(1.1)
- ::after overlay changed from solid midnight @ 0.6 to gradient
  (midnight→transparent @ 0.5) — brighter image with smooth falloff
This commit is contained in:
reef
2026-08-19 22:23:28 +00:00
parent e2e37e18b4
commit 5e315cee0e
3 changed files with 22 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -30,6 +30,7 @@
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
script.js
+17 -16
View File
@@ -461,12 +461,11 @@ var si = 0,
cards.push({ el: card, server: s, idx: idx });
});
/* Stagger the card entrance animation */
cards.forEach(function(c, i) {
setTimeout(function() {
c.el.classList.add('visible');
}, 80 + i * 70);
});
/* GSAP stagger entrance for cards */
gsap.fromTo('.server-card',
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 0.6, stagger: 0.09, ease: 'power2.out' }
);
function pingServer(host) {
return new Promise(function(resolve) {
@@ -523,7 +522,7 @@ var si = 0,
c.el.classList.add('server-best');
}
});
/* Preload city image and carousel-slide */
/* Preload city image and carousel-slide with GSAP */
var hero = document.querySelector('.hero');
var bestCard = cards.filter(function(c) { return c.server.host === best.host; })[0];
if (hero && bestCard && heroImages[best.host]) {
@@ -546,21 +545,23 @@ var si = 0,
newEl.className = 'hero-bg-slide new';
newEl.style.backgroundImage = "url('" + heroImages[best.host] + "')";
bg.appendChild(newEl);
/* Fire both animations together */
requestAnimationFrame(function() {
oldEl.classList.add('out');
newEl.classList.add('in');
});
/* Label slides in from right */
var label = document.createElement('div');
label.className = 'hero-city-label';
label.innerHTML = 'Our <strong>' + bestCard.server.city + '</strong> server fits your location';
hero.appendChild(label);
requestAnimationFrame(function() {
label.classList.add('visible');
/* GSAP timeline — 3x slower */
gsap.set(oldEl, { x: '0%' });
gsap.set(newEl, { x: '100%' });
gsap.set(label, { x: '150%' });
var tl = gsap.timeline({
onComplete: function() { oldEl.remove(); }
});
/* Clean up old slide after animation done */
setTimeout(function() { oldEl.remove(); }, 1200);
tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0)
.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0)
.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
};
img.src = heroImages[best.host];
}
style.css
+4 -21
View File
@@ -112,8 +112,8 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
content: '';
position: absolute;
inset: 0;
background: var(--midnight);
opacity: 0.6;
background: linear-gradient(135deg, var(--midnight) 50%, rgba(13,27,46,0.4) 100%);
opacity: 0.5;
z-index: 0;
}
.hero-bg {
@@ -128,21 +128,8 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.12;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.hero-bg-slide.old {
transform: translateX(0);
}
.hero-bg-slide.old.out {
transform: translateX(100%);
}
.hero-bg-slide.new {
transform: translateX(100%);
}
.hero-bg-slide.new.in {
transform: translateX(0);
opacity: 0.25;
filter: brightness(1.15) saturate(1.1);
}
.hero .container { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-kicker {
@@ -417,14 +404,10 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
font-size: 0.9rem;
z-index: 2;
transform: translateX(150%);
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
backdrop-filter: blur(6px);
pointer-events: none;
}
.hero-city-label.visible {
transform: translateX(0);
}
.hero-city-label strong {
color: var(--brass-bright);
font-weight: 400;