fix: stabilize website boot loader
This commit is contained in:
@@ -26,6 +26,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.add("motion-enhanced");
|
||||
gsap.set("[data-motion]", { autoAlpha: 1 });
|
||||
gsap.set("[data-motion-line]", { transformOrigin: "center" });
|
||||
|
||||
@@ -44,7 +45,15 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
autoAlpha: 1,
|
||||
clearProps: "transform",
|
||||
});
|
||||
gsap.set(".boot-screen", { display: "none" });
|
||||
|
||||
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||
mobileIntro
|
||||
.set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
|
||||
.from(".boot-frame", { y: 12, scale: 0.99, duration: 0.28, ease: "power3.out" })
|
||||
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.34, transformOrigin: "left center" }, "-=0.08")
|
||||
.fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.5, transformOrigin: "left center" }, "-=0.04")
|
||||
.to(".boot-screen", { autoAlpha: 0, yPercent: -2, duration: 0.34, ease: "power3.inOut", delay: 0.06 })
|
||||
.set(".boot-screen", { display: "none" });
|
||||
|
||||
gsap.to("[data-motion-dot]", {
|
||||
scale: 1.14,
|
||||
@@ -258,7 +267,10 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
};
|
||||
});
|
||||
|
||||
return () => matchMedia.revert();
|
||||
return () => {
|
||||
matchMedia.revert();
|
||||
root.classList.remove("motion-enhanced");
|
||||
};
|
||||
},
|
||||
{ scope: scopeRef },
|
||||
);
|
||||
|
||||
@@ -349,6 +349,17 @@ a {
|
||||
animation: boot-rule-fallback 1.2s 0.32s ease both;
|
||||
}
|
||||
|
||||
.motion-root.motion-enhanced .boot-screen,
|
||||
.motion-root.motion-enhanced .boot-rule,
|
||||
.motion-root.motion-enhanced .boot-progress span {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.motion-root.motion-enhanced .boot-rule,
|
||||
.motion-root.motion-enhanced .boot-progress span {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.site-nav,
|
||||
.hero-section,
|
||||
.platform-section,
|
||||
|
||||
Reference in New Issue
Block a user