scripts custom code split into separate files

scripts/customCursor.js

@@ -0,0 +1,16 @@
+// CUSTOM CURSOR
+gsap.registerPlugin(CustomEase);
+CustomEase.create("menuEase", "0.64, 0, 0, 1");
+
+const cursor = document.querySelector(".cursor-wrapper");
+
+function hideCursor() {
+  gsap.to(cursor, { opacity: 0, duration: 0.02 });
+  document.addEventListener("mousemove", showCursor, { once: true });
+}
+
+function showCursor() {
+  gsap.to(cursor, { opacity: 1, duration: 0.4, delay: 0.2 });
+}
+
+document.addEventListener("click", hideCursor);

scripts/hideEmptyRelatedItems.js

@@ -0,0 +1,7 @@
+// HIDE RELATED POSTS WHEN IS EMPTY
+
+$(".related-items .w-dyn-empty")
+  .parents(".related-posts")
+  .each(function () {
+    $(".related-posts").hide();
+  });

scripts/lenis.js

@@ -1,15 +1,15 @@
-  // LENIS SCROLL BEHAVIOR
-  const lenis = new Lenis();
+// LENIS SCROLL BEHAVIOR
+const lenis = new Lenis();
 
-  function raf(time) {
-    lenis.raf(time);
-    requestAnimationFrame(raf);
-  }
+function raf(time) {
+  lenis.raf(time);
+  requestAnimationFrame(raf);
+}
 
-  lenis.on("scroll", ScrollTrigger.update);
+lenis.on("scroll", ScrollTrigger.update);
 
-  gsap.ticker.add((time) => {
-    lenis.raf(time * 1000);
-  });
+gsap.ticker.add((time) => {
+  lenis.raf(time * 1000);
+});
 
-  gsap.ticker.lagSmoothing(0);
+gsap.ticker.lagSmoothing(0);

scripts/menuAnimation.js

@@ -0,0 +1,62 @@
+// MENU ANIMATION
+const navbar = document.querySelector(".sticky-navbar");
+
+$(".menu-nav-button a").click(function (e) {});
+
+gsap.set(".menu-mobile-footer", { opacity: 0 });
+gsap.to(".menu-mobile-footer", { opacity: 1, duration: 0.8, delay: 1.5 });
+
+gsap.set(".menu-item a", { y: 40, opacity: 0 });
+
+$(".close-nav").click(function (e) {
+  e.preventDefault();
+  hideCursor();
+
+  gsap.to(navbar, {
+    backgroundColor: "var(--color--background)",
+    duration: 0.5,
+    delay: 1.4,
+  });
+
+  const paths = document.querySelectorAll(".logo path");
+  paths.forEach((path) => {
+    gsap.to(path, { fill: "CurrentColor", duration: 0.5, delay: 1.2 });
+  });
+
+  $("html").removeClass("no-scroll");
+
+  gsap.fromTo(
+    ".menu-item a",
+    { opacity: 1, y: 0 },
+    {
+      opacity: 0,
+      y: 100,
+      duration: 1,
+      ease: "menuEase",
+      stagger: 0.1,
+    }
+  );
+});
+
+$(".menu-nav-button").click(function (e) {
+  e.preventDefault();
+
+  const paths = document.querySelectorAll(".logo path");
+  paths.forEach((path) => {
+    gsap.to(path, { fill: "white", duration: 0.5, delay: 0.2 });
+  });
+
+  $("html").addClass("no-scroll");
+  gsap.fromTo(
+    ".menu-item a",
+    { opacity: 0, y: 40 },
+    {
+      opacity: 1,
+      y: 0,
+      duration: 1.5,
+      ease: "menuEase",
+      stagger: 0.1,
+      delay: 0.05,
+    }
+  );
+});

scripts/revealImage.js

@@ -1,31 +1,31 @@
-  // REVEAL IMAGE ANIMATION
-  document.addEventListener("DOMContentLoaded", function () {
-    gsap.registerPlugin(CustomEase, ScrollTrigger);
+// REVEAL IMAGE ANIMATION
+document.addEventListener("DOMContentLoaded", function () {
+  gsap.registerPlugin(CustomEase, ScrollTrigger);
 
-    if (!CustomEase.get("El")) {
-      CustomEase.create("El", "0.64, 0, 0, 1");
-    }
+  if (!CustomEase.get("El")) {
+    CustomEase.create("El", "0.64, 0, 0, 1");
+  }
 
-    document.querySelectorAll(".reveal-image").forEach((wrapper) => {
-      const mediaElement = wrapper.querySelector("img, video");
-      if (mediaElement) {
-        ScrollTrigger.create({
-          trigger: wrapper,
-          start: "top 90%",
-          once: true,
-          onEnter: () => {
-            gsap.to(wrapper, {
-              duration: 1.5,
-              ease: "El",
-              "--after-top": "100%",
-            });
-            gsap.to(mediaElement, {
-              duration: 1.5,
-              ease: "El",
-              scale: 1,
-            });
-          },
-        });
-      }
-    });
-  });
+  document.querySelectorAll(".reveal-image").forEach((wrapper) => {
+    const mediaElement = wrapper.querySelector("img, video");
+    if (mediaElement) {
+      ScrollTrigger.create({
+        trigger: wrapper,
+        start: "top 90%",
+        once: true,
+        onEnter: () => {
+          gsap.to(wrapper, {
+            duration: 1.5,
+            ease: "El",
+            "--after-top": "100%",
+          });
+          gsap.to(mediaElement, {
+            duration: 1.5,
+            ease: "El",
+            scale: 1,
+          });
+        },
+      });
+    }
+  });
+});

scripts/stickyNavbar.js

@@ -0,0 +1,31 @@
+// STICKY NAVBAR
+let exists = $(".sticky-navbar").length ? true : false;
+let prevScrollpos = $(window).scrollTop();
+
+$(window).on("scroll", function () {
+  if (exists && $(window).scrollTop() > 200) {
+    $(".sticky-navbar").removeClass("is-on-top");
+  } else if (exists) {
+    $(".sticky-navbar").addClass("is-on-top");
+  }
+});
+
+$(window).scroll(function () {
+  var currentScrollPos = $(window).scrollTop();
+
+  if (prevScrollpos > currentScrollPos) {
+    if (currentScrollPos < 200) {
+      return;
+    }
+    $(".sticky-navbar").addClass("scrolled-up");
+    $(".sticky-navbar").removeClass("scrolled-down");
+  } else {
+    if (currentScrollPos < 200) {
+      return;
+    }
+    $(".sticky-navbar").addClass("scrolled-down");
+    $(".sticky-navbar").removeClass("scrolled-up");
+  }
+
+  prevScrollpos = currentScrollPos;
+});

scripts/videos.js

@@ -0,0 +1,56 @@
+document.querySelectorAll(".video-cta").forEach((item) => {
+  let isClicked = false;
+  const videoElement = item.querySelector(".video-play video");
+  const preview = item.querySelector(".video-preview");
+  const label = item.querySelector(".label-md");
+  const playLabel = item.querySelector(".video-play-label.desktop .video-cta");
+
+  item.addEventListener("click", async () => {
+    isClicked = !isClicked;
+    item.classList.toggle("is-clicked", isClicked);
+
+    if (isClicked) {
+      if (videoElement) {
+        videoElement.pause();
+        videoElement.currentTime = 0;
+        await videoElement.load(); // Ensure the video is reset
+        videoElement.muted = false;
+        await videoElement
+          .play()
+          .catch((error) => console.error("Error playing video:", error));
+      }
+      gsap.to(preview, {
+        opacity: 0,
+        display: "none",
+        duration: 0.5,
+        delay: 0.3,
+      });
+      if (label) label.textContent = "Close";
+      if (playLabel) playLabel.textContent = "Close";
+    } else {
+      if (videoElement) {
+        videoElement.pause();
+        videoElement.currentTime = 0;
+        await videoElement.load(); // Ensure the video is reset
+        videoElement.muted = true;
+        await videoElement
+          .play()
+          .catch((error) => console.error("Error playing video:", error));
+      }
+      gsap.to(preview, { opacity: 1, display: "block", duration: 0.2 });
+      if (label) label.textContent = "Play";
+      if (playLabel) playLabel.textContent = "Play";
+    }
+  });
+
+  if (videoElement) {
+    videoElement.addEventListener("ended", () => {
+      videoElement.currentTime = 0;
+      videoElement
+        .play()
+        .catch((error) =>
+          console.error("Error playing video after end:", error)
+        );
+    });
+  }
+});