Ir al contenido
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: "vertical",
smooth: true,
smoothTouch: false,
infinite: false,
});
window.lenis = lenis;
let lastScrollY = 0;
let isMenuVisible = true;
let isAnimating = false;
const menu = document.getElementById("menu");
const bgMenu = document.getElementById("bg-menu");
if (!menu || !bgMenu) {
console.warn("No se encontraron #menu o #bg-menu en esta pagina.");
return;
}
function handleScroll(e) {
if (isAnimating) return;
isAnimating = true;
const currentScrollY = e.scroll;
if (Math.abs(currentScrollY - lastScrollY) lastScrollY + 5 && isMenuVisible) {
gsap.to(menu, { y: "-100%", duration: 0.3, ease: "power2.out" });
isMenuVisible = false;
} else if (currentScrollY { isAnimating = false; });
}
lenis.on("scroll", handleScroll);
gsap.to("#bg-menu", {
opacity: 1,
duration: 0.2,
ease: "power4.out",
scrollTrigger: {
trigger: "body",
start: "100px top",
toggleActions: "play reverse play reverse",
markers: false
}
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
});
document.addEventListener("DOMContentLoaded", function () {
const menuBtn = document.querySelector('.menu-toggle');
const menuCircle = document.querySelector('.side-menu-circle');
const menuItems = document.querySelectorAll('.menu-circular .elementor-item');
if (!menuBtn || !menuCircle || menuItems.length === 0) {
console.error("Faltan elementos.");
return;
}
gsap.set(menuCircle, { clipPath: "circle(0% at 100% 0%)" });
gsap.set(menuItems, { opacity: 0, x: 30 });
let isOpen = false;
let isAnimating = false;
function openMenu() {
const tl = gsap.timeline();
tl.to(menuCircle, { clipPath: "circle(145% at 100% 0%)", duration: 1, ease: "power2.out" })
.to(menuItems, { opacity: 1, x: 0, stagger: 0.1, duration: 0.5, ease: "power2.out" }, "-=1.3");
}
function closeMenu() {
const tl = gsap.timeline();
tl.to(menuItems, { opacity: 0, x: 30, stagger: 0.1, duration: 0.1, ease: "power4.in" })
.to(menuCircle, { clipPath: "circle(0% at 100% 0%)", duration: 0.8, ease: "power2.out" }, "-=1");
}
menuBtn.addEventListener('click', () => {
if (isAnimating) return;
isAnimating = true;
isOpen = !isOpen;
menuBtn.classList.toggle("open");
if (isOpen) { openMenu(); } else { closeMenu(); }
setTimeout(() => { isAnimating = false; }, 1000);
});
});
Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Aceptar Política de privacidad
