diff --git a/assets/scss/_browser.scss b/assets/scss/_browser.scss
index 1ecfded8..d08d8e51 100644
--- a/assets/scss/_browser.scss
+++ b/assets/scss/_browser.scss
@@ -1,4 +1,3 @@
-
.browser {
position: relative;
--browser-blue: #00B39F;
@@ -46,7 +45,8 @@
display: flex;
align-items: center;
gap: 18px;
- padding: 1.8cqi 2.2cqi; /* scale padding proportionally */
+ padding: 1.8cqi 2.2cqi;
+ /* scale padding proportionally */
background: #1a1b1d;
border-bottom: 1px solid rgba(100, 100, 100, 0.06);
}
@@ -84,7 +84,8 @@
color: #cbd2d9;
background: rgba(200, 200, 200, 0.08);
margin: 0 auto;
- font-size: clamp(0.6rem, 1.2cqi, 0.9rem); /* Scale font size slightly */
+ font-size: clamp(0.6rem, 1.2cqi, 0.9rem);
+ /* Scale font size slightly */
}
.browser-body {
@@ -116,8 +117,7 @@
- 980px = baseline width
- min scale = 0.2 (matches previous <=196px rule)
- max scale = 1 (no upscaling above baseline) */
- --browser-scale: clamp(0.2, calc(100cqi / 980), 1);
- --browser-scale: 1;
+ --browser-scale: clamp(0.2, calc(100cqi / 980px), 1);
scale: var(--browser-scale, 1);
transition: scale 0.08s linear;
}
@@ -138,7 +138,7 @@
display: grid;
place-items: center;
perspective: 900px;
- z-index: 4;
+ z-index: 4;
}
.cube {
@@ -200,13 +200,11 @@
position: absolute;
inset: -60% -20%;
border-radius: inherit;
- background: radial-gradient(
- 100% 100% at right,
- rgba(12, 16, 28, 0.9),
- rgba(178, 255, 240, 0.9) 8%,
- rgba(0, 211, 169, 0.5) 40%,
- transparent 80%
- );
+ background: radial-gradient(100% 100% at right,
+ rgba(12, 16, 28, 0.9),
+ rgba(178, 255, 240, 0.9) 8%,
+ rgba(0, 211, 169, 0.5) 40%,
+ transparent 80%);
offset-path: inset(0 round 999px);
offset-anchor: 100% 50%;
animation: trail 10s infinite linear;
@@ -244,13 +242,13 @@
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
- box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
- border-color 0.3s ease;
+ box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
+ border-color 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 24px 60px rgba(8, 20, 60, 0.6),
- 0 0 20px rgba(0, 211, 169, 0.12);
+ 0 0 20px rgba(0, 211, 169, 0.12);
border-color: rgba(0, 211, 169, 0.7);
}
@@ -276,7 +274,8 @@
.cta-hexagon {
width: 18px;
- height: 18px; /* (width * tan(60deg)) to maintain aspect ratio */
+ height: 18px;
+ /* (width * tan(60deg)) to maintain aspect ratio */
background: radial-gradient(circle, rgba(158, 255, 236, 0.9), rgba(0, 211, 169, 0.55));
box-shadow: 0 0 12px rgba(0, 211, 169, 0.6);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
@@ -333,7 +332,7 @@
border-radius: 4px;
// background: linear-gradient(180deg, #0d100d, #050805);
// box-shadow: inset 0 0 10px rgba(250, 250, 250, 0.45);
- background: linear-gradient(to right,rgba(170, 204, 172, 0.082),color-mix(in srgb,#000 88%,#fff),rgba(170, 204, 172, 0.082));
+ background: linear-gradient(to right, rgba(170, 204, 172, 0.082), color-mix(in srgb, #000 88%, #fff), rgba(170, 204, 172, 0.082));
}
.browser-shadow {
@@ -344,4 +343,4 @@
width: 100%;
pointer-events: none;
z-index: -1;
-}
+}
\ No newline at end of file
diff --git a/assets/scss/_scroll-cube.scss b/assets/scss/_scroll-cube.scss
index 79da480b..4e0f4721 100644
--- a/assets/scss/_scroll-cube.scss
+++ b/assets/scss/_scroll-cube.scss
@@ -104,33 +104,33 @@
// 3D depth offsets — front/mid/back pairs
.reunited-piece--0 {
- transform: translateZ(2px);
+ transform: translateZ(0);
filter: drop-shadow(0 4px 20px rgba(0, 211, 169, 0.25));
}
.reunited-piece--1 {
- transform: translateZ(18px);
+ transform: translateZ(0);
filter: drop-shadow(0 4px 16px rgba(0, 211, 169, 0.22));
}
.reunited-piece--2 {
- transform: translateZ(14px);
+ transform: translateZ(0);
filter: drop-shadow(0 2px 12px rgba(0, 179, 159, 0.25));
}
.reunited-piece--3 {
- transform: translateZ(10px);
+ transform: translateZ(0);
filter: drop-shadow(0 2px 10px rgba(0, 179, 159, 0.18));
}
.reunited-piece--4 {
- transform: translateZ(-2px);
+ transform: translateZ(0);
filter: drop-shadow(0 0 8px rgba(0, 179, 159, 0.2));
opacity: 0.85;
}
.reunited-piece--5 {
- transform: translateZ(-18px) rotateY(-1deg);
+ transform: translateZ(0) rotateY(-1deg);
filter: drop-shadow(0 0 6px rgba(0, 211, 169, 0.08));
opacity: 0.78;
}
@@ -198,6 +198,12 @@
// ─── Responsive ───
@media (max-width: 768px) {
+
+ body .scroll-piece-stage .scroll-piece-body svg,
+ body .reunited-logo-inner .reunited-piece {
+ filter: none;
+ }
+
.scroll-piece-stage {
width: 50px;
height: 50px;
@@ -208,12 +214,12 @@
height: 180px;
}
- .reunited-piece--0 { transform: translateZ(14px); }
- .reunited-piece--1 { transform: translateZ(10px); }
- .reunited-piece--2 { transform: translateZ(2px); }
- .reunited-piece--3 { transform: translateZ(0px); }
- .reunited-piece--4 { transform: translateZ(-8px); }
- .reunited-piece--5 { transform: translateZ(-12px); }
+ .reunited-piece--0 { transform: translateZ(0); }
+ .reunited-piece--1 { transform: translateZ(0); }
+ .reunited-piece--2 { transform: translateZ(0); }
+ .reunited-piece--3 { transform: translateZ(0); }
+ .reunited-piece--4 { transform: translateZ(0); }
+ .reunited-piece--5 { transform: translateZ(0); }
.reunited-glow {
width: 200px;
diff --git a/static/scripts/main.js b/static/scripts/main.js
index 19aefeef..a5116f12 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -73,7 +73,7 @@ const scrubEach = (elements, props, triggerEl, startBase, endBase, offsetPer) =>
trigger: triggerEl,
start: 'top ' + (startBase - i * offsetPer) + '%',
end: 'top ' + (endBase - i * offsetPer) + '%',
- scrub: 1,
+ scrub: true,
}
}));
});
@@ -115,10 +115,10 @@ const initScrollPieces = () => {
const introSchedule = [
{ pieceIdx: 0, section: '.capabilities-section', startX: '-20vw', startY: '30vh', rotation: -30 },
{ pieceIdx: 2, section: '.customers-section', startX: '80vw', startY: '60vh', rotation: 20 },
- { pieceIdx: 5, section: '.hero-section', startX: '-15vw', startY: '40vh', rotation: -15 },
- { pieceIdx: 1, section: '.demo-section', startX: '85vw', startY: '55vh', rotation: 25 },
+ { pieceIdx: 5, section: '.hero-section', startX: '-15vw', startY: '40vh', rotation: -15 },
+ { pieceIdx: 1, section: '.demo-section', startX: '85vw', startY: '55vh', rotation: 25 },
{ pieceIdx: 3, section: '.capabilities-section', startX: '18vw', startY: '45vh', rotation: -20 },
- { pieceIdx: 4, section: '.community-section', startX: '82vw', startY: '35vh', rotation: 30 },
+ { pieceIdx: 4, section: '.community-section', startX: '82vw', startY: '35vh', rotation: 30 },
];
// Create DOM for each floating piece
@@ -131,12 +131,12 @@ const initScrollPieces = () => {
anchor.setAttribute('data-piece', i);
anchor.innerHTML =
'';
document.body.appendChild(anchor);
anchors.push(anchor);
@@ -149,7 +149,7 @@ const initScrollPieces = () => {
if (reunitedInner) {
reunitedInner.innerHTML = pieces.map((p, i) =>
''
).join('');
}
@@ -163,6 +163,16 @@ const initScrollPieces = () => {
// ── Per-piece scroll journeys ──
// Store journey triggers so we can kill the scrubs when convergence fires
const journeyTriggers = [];
+ const initialLogoEl = document.querySelector('.reunited-logo');
+ const getTargetScale = () => {
+ const floatEl = document.querySelector('.reunited-float');
+ if (!floatEl) return 5.6;
+ const oldAnim = floatEl.style.animation;
+ floatEl.style.animation = 'none';
+ const w = floatEl.getBoundingClientRect().width;
+ floatEl.style.animation = oldAnim;
+ return w / 50 || 5.6;
+ };
const browserSection = document.querySelector('.browser');
const sections = [
@@ -192,7 +202,7 @@ const initScrollPieces = () => {
trigger: triggerEl,
start: 'top 85%',
end: 'top 50%',
- scrub: 1,
+ scrub: true,
}
});
@@ -220,7 +230,8 @@ const initScrollPieces = () => {
start: 'top 80%',
endTrigger: '.browser',
end: 'top 40%',
- scrub: 2,
+ scrub: true,
+ invalidateOnRefresh: true,
}
});
journeyTriggers.push(journey.scrollTrigger);
@@ -231,12 +242,13 @@ const initScrollPieces = () => {
const targetY = parseFloat(startY) + (orbit.y - parseFloat(startY)) * progress;
const wobbleX = Math.sin(pieceIdx * 1.5 + s * 2) * 5;
const wobbleY = Math.cos(pieceIdx * 1.2 + s * 1.8) * 3;
- const targetScale = 1 + progress * 4.6;
-
journey.to(anchor, {
x: targetX + wobbleX + 'vw',
y: targetY + wobbleY + 'vh',
- scale: targetScale,
+ scale: () => {
+ const currentScaleFactor = getTargetScale() - 1;
+ return 1 + progress * currentScaleFactor;
+ },
duration: 1, ease: 'none',
}, s > 0 ? '>' : 0);
journey.to(body, {
@@ -252,104 +264,132 @@ const initScrollPieces = () => {
ScrollTrigger.create({
trigger: browserSection,
start: 'top 85%',
- once: true,
onEnter: () => {
anchors.forEach(a => {
a.style.zIndex = '10';
const svg = a.querySelector('svg');
if (svg) gsap.to(svg, { opacity: 0.85, duration: 0.6, overwrite: true });
});
+ },
+ onLeaveBack: () => {
+ anchors.forEach(a => {
+ a.style.zIndex = '-1';
+ const svg = a.querySelector('svg');
+ if (svg) gsap.to(svg, { clearProps: 'opacity', duration: 0.6, overwrite: true });
+ });
}
});
}
- // ── Step 2: Convergence — pieces swoop from orbit into the browser screen ──
+ // ── Step 2: Convergence — fully scrubbed, high performance ──
if (reunitedFloat && browserSection) {
+ const sections = [
+ '.customers-section', '.hero-section', '.demo-section',
+ '.capabilities-section', '.community-section', '.browser'
+ ];
+
+ const orbitTargets = [
+ { x: 35, y: 30 }, { x: 65, y: 30 }, { x: 70, y: 52 },
+ { x: 60, y: 70 }, { x: 30, y: 52 }, { x: 48, y: 22 }
+ ];
+
+ const startPositions = [];
+ introSchedule.forEach((intro) => {
+ const { pieceIdx, section } = intro;
+ const steps = sections.slice(sections.indexOf(section) + 1).length + 1;
+ const s = steps - 1;
+ startPositions[pieceIdx] = {
+ x: orbitTargets[pieceIdx].x + Math.sin(pieceIdx * 1.5 + s * 2) * 5,
+ y: orbitTargets[pieceIdx].y + Math.cos(pieceIdx * 1.2 + s * 1.8) * 3,
+ };
+ });
+
+ const logoEl = document.querySelector('.reunited-logo');
+ const easeFn = gsap.parseEase('power2.inOut');
+ const bounceFn = gsap.parseEase('bounce.out');
+
+ let docLogoCenterX = 0;
+ let docLogoCenterY = 0;
+ let cachedDynamicScale = 5.6;
+
ScrollTrigger.create({
trigger: browserSection,
- start: 'top 30%',
- once: true,
- onEnter: () => {
- requestAnimationFrame(() => {
- // Kill scroll-driven journeys before taking over with time-based tweens
- journeyTriggers.forEach(t => {
- if (t) {
- if (t.animation) t.animation.kill();
- t.kill();
- }
- });
- anchors.forEach(a => {
- gsap.killTweensOf(a);
- a.style.zIndex = '100'; // above everything during swoop
- });
- bodies.forEach(b => gsap.killTweensOf(b));
-
- const logoEl = document.querySelector('.reunited-logo');
- if (!logoEl) return;
-
- const logoRect = logoEl.getBoundingClientRect();
- const logoCenterX = logoRect.left + logoRect.width / 2;
- const finalLogoYOffset = -24;
- const logoCenterY = logoRect.top + logoRect.height / 2 + finalLogoYOffset;
-
- let arrived = 0;
- introSchedule.forEach(({ pieceIdx }, order) => {
- const anchor = anchors[pieceIdx];
- const body = bodies[pieceIdx];
- const svg = anchor.querySelector('svg');
- const glow = anchor.querySelector('.scroll-piece-glow');
-
- if (glow) gsap.to(glow, { opacity: 0, duration: 0.15, overwrite: true });
- if (svg) gsap.set(svg, { opacity: 1 });
-
- gsap.to(anchor, {
- x: logoCenterX,
- y: logoCenterY,
- scale: 5.6,
- opacity: 1,
- duration: 0.25,
- delay: order * 0.045,
- ease: 'power2.inOut',
- overwrite: true,
- onComplete: () => {
- arrived++;
- if (arrived === introSchedule.length) {
- gsap.to(anchors, {
- scale: 5.72, duration: 0.14, ease: 'sine.out',
- overwrite: true,
- onComplete: () => {
- gsap.to(anchors, {
- scale: 5.6, duration: 0.2, ease: 'sine.inOut',
- onComplete: () => {
- gsap.set(reunitedFloat, { opacity: 1 });
- gsap.fromTo(logoEl,
- { y: finalLogoYOffset - 40, scale: 0.94 },
- {
- y: finalLogoYOffset,
- scale: 1,
- duration: 0.9,
- ease: 'bounce.out',
- overwrite: true,
- }
- );
- anchors.forEach(a => {
- gsap.set(a, { opacity: 0 });
- a.style.zIndex = '-1';
- });
- }
- });
- }
- });
- }
- }
- });
-
- gsap.to(body, {
- rotateY: 0, rotateX: 0,
- duration: 0.5, delay: order * 0.045, ease: 'sine.inOut',
- overwrite: true,
- });
+ start: 'top 40%',
+ end: 'top 10%',
+ scrub: true,
+ onRefresh: () => {
+ if (!logoEl) return;
+
+ // Temporarily disable the float animation to get the true untransformed center
+ const oldAnim = reunitedFloat.style.animation;
+ reunitedFloat.style.animation = 'none';
+
+ const floatRect = reunitedFloat.getBoundingClientRect();
+ const scrollY = window.scrollY || document.documentElement.scrollTop;
+ const scrollX = window.scrollX || document.documentElement.scrollLeft;
+
+ docLogoCenterX = floatRect.left + scrollX + floatRect.width / 2;
+ docLogoCenterY = floatRect.top + scrollY + floatRect.height / 2 - 24;
+ cachedDynamicScale = floatRect.width / 50 || 5.6;
+
+ // Restore the float animation
+ reunitedFloat.style.animation = oldAnim;
+ },
+ onUpdate: (self) => {
+ if (!logoEl) return;
+ const progress = self.progress;
+ const eased = easeFn(progress);
+
+ const vw = window.innerWidth / 100;
+ const vh = window.innerHeight / 100;
+ const scrollY = window.scrollY || document.documentElement.scrollTop;
+ const scrollX = window.scrollX || document.documentElement.scrollLeft;
+
+ // Dynamically find viewport-relative position using fast O(1) math
+ const logoCenterX = docLogoCenterX - scrollX;
+ const logoCenterY = docLogoCenterY - scrollY;
+
+ introSchedule.forEach(({ pieceIdx }) => {
+ const anchor = anchors[pieceIdx];
+ const body = bodies[pieceIdx];
+ const svg = anchor.querySelector('svg');
+ const glow = anchor.querySelector('.scroll-piece-glow');
+
+ const startX = startPositions[pieceIdx].x * vw;
+ const startY = startPositions[pieceIdx].y * vh;
+
+ const currentX = startX + (logoCenterX - startX) * eased;
+ const currentY = startY + (logoCenterY - startY) * eased;
+
+ let anchorOpacity = 1;
+ if (progress > 0.8) {
+ anchorOpacity = 1 - ((progress - 0.8) / 0.2);
+ }
+
+ anchor.style.position = 'fixed';
+ anchor.style.top = '0px';
+
+ gsap.set(anchor, {
+ x: currentX + 'px',
+ y: currentY + 'px',
+ scale: cachedDynamicScale,
+ opacity: anchorOpacity,
+ zIndex: progress > 0.8 ? -1 : 100
});
+
+ gsap.set(body, { rotateY: 0, rotateX: 0 });
+
+ if (glow) gsap.set(glow, { opacity: 0.5 * (1 - progress) });
+ if (svg) gsap.set(svg, { opacity: 0.85 + 0.15 * progress });
+ });
+
+ let logoOpacity = progress > 0.8 ? (progress - 0.8) / 0.2 : 0;
+ gsap.set(reunitedFloat, { opacity: logoOpacity });
+
+ const bounced = bounceFn(progress);
+ gsap.set(logoEl, {
+ scale: 0.94 + 0.06 * bounced,
+ y: -64 + 40 * bounced
});
}
});
@@ -370,15 +410,15 @@ const initScrollAnimations = () => {
gsap.to('.scroll-orb--1', {
y: '-60vh', x: '15vw', scale: 1.4, opacity: 0.5,
- scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: 2 }
+ scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: true }
});
gsap.to('.scroll-orb--2', {
y: '-40vh', x: '-20vw', scale: 0.8,
- scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: 3 }
+ scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: true }
});
gsap.to('.scroll-orb--3', {
y: '-80vh', x: '10vw', scale: 1.2, opacity: 0.7,
- scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: 2.5 }
+ scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: true }
});
// ── Scroll Logo Pieces Journey ──
@@ -401,7 +441,7 @@ const initScrollAnimations = () => {
trigger: wrapper,
start: 'bottom 30%', // recession begins when bottom of hero reaches 60% viewport
end: 'bottom top',
- scrub: 1,
+ scrub: true,
}
});
}
@@ -411,7 +451,7 @@ const initScrollAnimations = () => {
if (customersSection) {
gsap.from('.customers-title', {
y: 30, opacity: 0,
- scrollTrigger: { trigger: customersSection, start: 'top 90%', end: 'top 55%', scrub: 1 }
+ scrollTrigger: { trigger: customersSection, start: 'top 90%', end: 'top 55%', scrub: true }
});
}
@@ -420,19 +460,19 @@ const initScrollAnimations = () => {
if (heroSection) {
gsap.from('.hero-badge', {
y: 40, opacity: 0,
- scrollTrigger: { trigger: heroSection, start: 'top 90%', end: 'top 50%', scrub: 1 }
+ scrollTrigger: { trigger: heroSection, start: 'top 90%', end: 'top 50%', scrub: true }
});
gsap.from('.hero-title', {
y: 80, opacity: 0,
- scrollTrigger: { trigger: heroSection, start: 'top 88%', end: 'top 40%', scrub: 1 }
+ scrollTrigger: { trigger: heroSection, start: 'top 88%', end: 'top 40%', scrub: true }
});
gsap.from('.hero-subtitle', {
y: 100, opacity: 0,
- scrollTrigger: { trigger: heroSection, start: 'top 85%', end: 'top 35%', scrub: 1 }
+ scrollTrigger: { trigger: heroSection, start: 'top 85%', end: 'top 35%', scrub: true }
});
gsap.from('.hero-actions', {
y: 60, opacity: 0,
- scrollTrigger: { trigger: heroSection, start: 'top 80%', end: 'top 35%', scrub: 1 }
+ scrollTrigger: { trigger: heroSection, start: 'top 80%', end: 'top 35%', scrub: true }
});
const statItems = heroSection.querySelectorAll('.stat-item');
@@ -450,7 +490,7 @@ const initScrollAnimations = () => {
// Recession — only after scrolling well past
gsap.to(heroSection, {
opacity: 0.4, y: -30,
- scrollTrigger: { trigger: heroSection, start: 'bottom 10%', end: 'bottom top', scrub: 1 }
+ scrollTrigger: { trigger: heroSection, start: 'bottom 10%', end: 'bottom top', scrub: true }
});
}
@@ -459,14 +499,14 @@ const initScrollAnimations = () => {
if (demoSection) {
gsap.from('.demo-header', {
y: 50, opacity: 0,
- scrollTrigger: { trigger: demoSection, start: 'top 88%', end: 'top 50%', scrub: 1 }
+ scrollTrigger: { trigger: demoSection, start: 'top 88%', end: 'top 50%', scrub: true }
});
const demoContainer = document.querySelector('.demo-container');
if (demoContainer) {
gsap.from(demoContainer, {
scale: 0.88, opacity: 0, y: 60,
- scrollTrigger: { trigger: demoContainer, start: 'top 90%', end: 'top 35%', scrub: 1 }
+ scrollTrigger: { trigger: demoContainer, start: 'top 90%', end: 'top 35%', scrub: true }
});
}
@@ -477,7 +517,7 @@ const initScrollAnimations = () => {
gsap.to(demoSection, {
opacity: 0.5, y: -20,
- scrollTrigger: { trigger: demoSection, start: 'bottom 40%', end: 'bottom top', scrub: 1 }
+ scrollTrigger: { trigger: demoSection, start: 'bottom 40%', end: 'bottom top', scrub: true }
});
}
@@ -500,7 +540,7 @@ const initScrollAnimations = () => {
if (ctaBox) {
gsap.from(ctaBox, {
y: 40, opacity: 0, scale: 0.96,
- scrollTrigger: { trigger: ctaBox, start: 'top 90%', end: 'top 55%', scrub: 1 }
+ scrollTrigger: { trigger: ctaBox, start: 'top 90%', end: 'top 55%', scrub: true }
});
}
}
@@ -512,7 +552,7 @@ const initScrollAnimations = () => {
communitySection.querySelector('.community-badge'),
communitySection.querySelector('.community-title'),
communitySection.querySelector('.community-subtitle') ||
- communitySection.querySelector('.capabilities-subtitle'),
+ communitySection.querySelector('.capabilities-subtitle'),
].filter(Boolean);
scrubEach(comHeaderEls, { y: 40, opacity: 0 }, communitySection, 88, 50, 4);
@@ -527,7 +567,7 @@ const initScrollAnimations = () => {
if (browserShell) {
gsap.from(browserShell, {
scale: 0.82, opacity: 0, y: 80,
- scrollTrigger: { trigger: '.browser', start: 'top 90%', end: 'top 30%', scrub: 1 }
+ scrollTrigger: { trigger: '.browser', start: 'top 90%', end: 'top 30%', scrub: true }
});
}
@@ -546,31 +586,30 @@ const initScrollAnimations = () => {
gsap.from(divider, {
opacity: 0, scaleX: 0.3,
- scrollTrigger: { trigger: divider, start: 'top 90%', end: 'top 70%', scrub: 1 }
+ scrollTrigger: { trigger: divider, start: 'top 90%', end: 'top 70%', scrub: true }
});
});
};
const initVideoHandler = () => {
- const wrapper = document.getElementById('video-wrapper');
- const btn = document.getElementById('play-button-trigger');
+ const wrapper = document.getElementById('video-wrapper');
+ const btn = document.getElementById('play-button-trigger');
- if (btn && wrapper) {
- btn.addEventListener('click', () => {
- const videoId = btn.getAttribute('data-video-id');
- wrapper.innerHTML = `
+ if (btn && wrapper) {
+ btn.addEventListener('click', () => {
+ const videoId = btn.getAttribute('data-video-id');
+ wrapper.innerHTML = `
`;
- });
- }
+ });
+ }
};
document.addEventListener("DOMContentLoaded", () => {
initMarquee();
- initScrollAnimations();
initVideoHandler();
const header = document.querySelector(".site-header");
@@ -583,17 +622,21 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
+window.addEventListener("load", () => {
+ initScrollAnimations();
+});
+
document.addEventListener("scroll", function () {
- const btn = document.getElementById("button-scroll-to-up");
+ const btn = document.getElementById("button-scroll-to-up");
- if (window.scrollY > 100) {
- btn.classList.add("show");
- } else {
- btn.classList.remove("show");
- }
+ if (window.scrollY > 100) {
+ btn.classList.add("show");
+ } else {
+ btn.classList.remove("show");
+ }
});
document.getElementById("button-scroll-to-up").addEventListener("click", function (e) {
- e.preventDefault();
- window.scrollTo({ top: 0, behavior: "smooth" });
+ e.preventDefault();
+ window.scrollTo({ top: 0, behavior: "smooth" });
});
\ No newline at end of file