From 78515503faaaf1ef3b23b8eb45f5c765765e885a Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Thu, 7 May 2026 16:32:12 +0900 Subject: [PATCH] gg --- src/components/Header.jsx | 2 +- src/components/main/MainVisual.jsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index ed3c7f4..c402b43 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -268,7 +268,7 @@ export default function PalRenewalHeader() {

- + PAL Networks

diff --git a/src/components/main/MainVisual.jsx b/src/components/main/MainVisual.jsx index a90533b..b6990fc 100644 --- a/src/components/main/MainVisual.jsx +++ b/src/components/main/MainVisual.jsx @@ -38,7 +38,7 @@ function MainVisual() { const darkHeroTrigger = ScrollTrigger.create({ trigger: sectionRef.current, start: "top top", - end: "+=2000", + end: "+=1400", onEnter: () => document.body.classList.add("is-dark-hero"), onEnterBack: () => document.body.classList.add("is-dark-hero"), onLeave: () => document.body.classList.remove("is-dark-hero"), @@ -51,10 +51,12 @@ function MainVisual() { scrollTrigger: { trigger: sectionRef.current, start: "top top", - end: "+=2000", - scrub: 1.15, + end: "+=1400", + scrub: 0.8, pin: true, anticipatePin: 1, + fastScrollEnd: true, + preventOverlaps: true, onUpdate: (self) => { gsap.set(progressBarRef.current, { width: `${self.progress * 100}%` }); @@ -62,7 +64,6 @@ function MainVisual() { if (self.progress >= 0.42 && !hero2Started) { hero2Started = true; - videoEl.currentTime = 0; videoEl.play().catch(() => {}); } @@ -75,7 +76,7 @@ function MainVisual() { }, }); - tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "none" }, 0).to(bgRef.current, { scale: 1.08, ease: "none" }, 0).to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.14, duration: 1.35 }, 0.1).to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.55).to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.78).to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.95).to(hero2Ref.current, { scale: 1.095, ease: "none" }, 2.5); + tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "power2.out", duration: 1.0 }, 0.15).to(bgRef.current, { scale: 1.08, ease: "none" }, 0.15).to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.07, duration: 0.55 }, 0.25).to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.1).to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.25).to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.4).to(hero2Ref.current, { scale: 1.095, ease: "none" }, 1.75); return () => { if (videoEl) {