Untitled
unknown
plain_text
2 years ago
1.1 kB
4
Indexable
// GSAP Timeline Animation const tl = gsap.timeline({ onComplete: hideIntro }); // Initial setup (Intro panel is shown without animation) gsap.set(".intro-wrapper", { opacity: 1 }); tl.from(".bg-panel", { color: "black", opacity: 0, duration: 1 }); tl.from(".svg", { opacity: 1, duration: 1.3 }); tl.from(".new-panel", { duration: 1, top: "100%", ease: "power4.out" }, "<") .to( ".new-panel", { duration: 0.8, opacity: 1, ease: "power4.inOut" }, "-=0.2" ) .to( ".new-panel", { duration: 0.8, opacity: 0, ease: "power4.inOut" }, "+=0.8" ); tl.set(".bg-panel", { opacity: 0 }, "<"); // Function to hide the intro after the animation function hideIntro() { gsap.to(".intro-wrapper", { duration: 0.1, opacity: 0, delay: 0.1, // Delay before the intro-wrapper fades out onComplete: function () { document.body.style.overflow = "auto"; // Restore scrolling after the intro gsap.set(".intro-wrapper", { display: "none" }); // Hide the intro-wrapper } }); }
Editor is loading...