PATH:
home
/
u865795251
/
domains
/
whatisnewis.com
/
public_html
/
unibiotech
/
landingpages
/
unibiotech3
/
Editing: script.js
document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(ScrollTrigger); /* --- MOBILE DRAWER INTERACTION --- */ const mobileMenuTrigger = document.getElementById('mobile-menu-trigger'); const mobileDrawer = document.getElementById('mobile-drawer'); const mobileProductsTrigger = document.getElementById('mobile-products-trigger'); const mobileProductsDropdown = document.getElementById('mobile-products-dropdown'); let isMobileMenuOpen = false; mobileMenuTrigger.addEventListener('click', () => { isMobileMenuOpen = !isMobileMenuOpen; mobileMenuTrigger.classList.toggle('active', isMobileMenuOpen); if (isMobileMenuOpen) { // Open drawer mobileDrawer.classList.remove('translate-x-full'); mobileDrawer.classList.add('translate-x-0'); document.body.classList.add('overflow-hidden'); // Disable body scroll // Stagger slide links in gsap.fromTo(".mobile-nav-item", { x: -20, opacity: 0 }, { x: 0, opacity: 1, duration: 0.5, stagger: 0.08, ease: "power3.out", delay: 0.2 // Wait slightly for drawer slide-in } ); } else { // Close drawer mobileDrawer.classList.add('translate-x-full'); mobileDrawer.classList.remove('translate-x-0'); document.body.classList.remove('overflow-hidden'); // Reset elements instantly gsap.to(".mobile-nav-item", { x: -20, opacity: 0, duration: 0.3, overwrite: true }); // Close sub-dropdown if open mobileProductsDropdown.style.height = "0px"; mobileProductsTrigger.querySelector('svg').style.transform = "rotate(0deg)"; } }); // Mobile Dropdown toggle inside drawer mobileProductsTrigger.addEventListener('click', () => { const isOpen = mobileProductsDropdown.style.height && mobileProductsDropdown.style.height !== "0px"; const chevron = mobileProductsTrigger.querySelector('svg'); if (!isOpen) { mobileProductsDropdown.style.height = mobileProductsDropdown.scrollHeight + "px"; chevron.style.transform = "rotate(180deg)"; } else { mobileProductsDropdown.style.height = "0px"; chevron.style.transform = "rotate(0deg)"; } }); /* --- MEGA MENU GSAP ANIMATION --- */ const productsMenuTrigger = document.getElementById('products-menu-trigger'); const megaMenu = document.getElementById('mega-menu'); let hoverIntentTimeout; productsMenuTrigger.addEventListener('mouseenter', () => { clearTimeout(hoverIntentTimeout); gsap.to(megaMenu, { autoAlpha: 1, // Combines opacity and visibility y: 0, duration: 0.4, ease: "power3.out", overwrite: true }); }); productsMenuTrigger.addEventListener('mouseleave', () => { // Slight delay to prevent flickering if user moves mouse to the dropdown hoverIntentTimeout = setTimeout(() => { gsap.to(megaMenu, { autoAlpha: 0, y: 10, duration: 0.3, ease: "power2.in", overwrite: true }); }, 100); }); /* --- FOOTER ENTRANCE ANIMATION --- */ // Staggered columns gsap.fromTo(".footer-col", { y: 40, opacity: 0 }, { scrollTrigger: { trigger: "#main-footer", start: "top 85%", // Trigger when footer is 15% into view from bottom }, y: 0, opacity: 1, duration: 1, stagger: 0.15, ease: "power3.out" } ); // Bottom bar gsap.fromTo(".footer-bottom", { opacity: 0 }, { scrollTrigger: { trigger: "#main-footer", start: "top 85%", }, opacity: 1, duration: 1.2, delay: 0.8, // Wait for columns to nearly finish ease: "power2.out" } ); // Layered wave horizontal drifting + vertical bobbing (independent speeds for liquid overlay) gsap.to("#footer-wave-1", { x: 100, duration: 22, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#footer-wave-1", { scaleY: 1.15, transformOrigin: "bottom center", duration: 7, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#footer-wave-2", { x: -120, duration: 18, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#footer-wave-2", { scaleY: 0.9, transformOrigin: "bottom center", duration: 5.5, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#footer-wave-3", { x: 80, duration: 14, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#footer-wave-3", { scaleY: 1.1, transformOrigin: "bottom center", duration: 4.5, repeat: -1, yoyo: true, ease: "sine.inOut" }); // Background Wave 1 Animation gsap.to("#bg-wave-1", { x: 80, duration: 25, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#bg-wave-1", { scaleY: 1.2, transformOrigin: "bottom center", duration: 9, repeat: -1, yoyo: true, ease: "sine.inOut" }); // Background Wave 2 Animation gsap.to("#bg-wave-2", { x: -90, duration: 20, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#bg-wave-2", { scaleY: 0.85, transformOrigin: "bottom center", duration: 7.5, repeat: -1, yoyo: true, ease: "sine.inOut" }); // Background Wave 3 Animation gsap.to("#bg-wave-3", { x: 60, duration: 15, repeat: -1, yoyo: true, ease: "sine.inOut" }); gsap.to("#bg-wave-3", { scaleY: 1.1, transformOrigin: "bottom center", duration: 6, repeat: -1, yoyo: true, ease: "sine.inOut" }); });
SAVE
CANCEL