Implement GSAP Features in 'neler-yapariz-gsap' Template: Introduced a comprehensive set of GSAP animations and sections in the 'neler-yapariz-gsap' template, enhancing the visual dynamics of the page. This update includes new JavaScript and CSS files for various animations, such as flip, inertia, marquee, and scrolltrigger, along with a structured layout for improved user interaction. Additionally, localization support has been integrated for all text elements, ensuring a seamless experience for users across different languages.

2026-01-10 17:47:51 +03:00
parent 3ad69677d8
commit 2fdf187658
42 changed files with 1902 additions and 78 deletions
@@ -0,0 +1,81 @@
+<script>
+{
+  let lenis;
+
+  const initScroll = () => {
+    lenis = new Lenis({});
+    lenis.on("scroll", ScrollTrigger.update);
+    gsap.ticker.add((time) => lenis.raf(time * 1000));
+    gsap.ticker.lagSmoothing(0);
+  };
+
+  function initGsapGlobal() {
+    /** Do everything that needs to happen
+     *  before triggering all
+     * the gsap animations */
+
+    initScroll();
+
+    // match reduced motion media
+    // const media = gsap.matchMedia();
+
+    /** Send a custom
+     *  event to all your
+     * gsap animations
+     * to start them */
+
+    const sendGsapEvent = () => {
+      window.dispatchEvent(
+        new CustomEvent("GSAPReady", {
+          detail: {
+            lenis,
+          },
+        })
+      );
+    };
+
+    // Check if fonts are already loaded
+    if (document.fonts.status === "loaded") {
+      sendGsapEvent();
+    } else {
+      document.fonts.ready.then(() => {
+        sendGsapEvent();
+      });
+    }
+
+    /** We need specific handling because the
+     * grid/list changes the scroll height of the whole container
+     */
+
+    let resizeTimeout;
+    const onResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        ScrollTrigger.refresh();
+      }, 50);
+    };
+
+    window.addEventListener("resize", () => onResize());
+    const resizeObserver = new ResizeObserver((entries) => onResize());
+    resizeObserver.observe(document.body);
+
+    queueMicrotask(() => {
+      gsap.to("[data-start='hidden']", {
+        autoAlpha: 1,
+        duration: 0.1,
+        delay: 0.2,
+      });
+    });
+  }
+
+  // this only for dev
+  const documentReady =
+    document.readyState === "complete" || document.readyState === "interactive";
+
+  if (documentReady) {
+    initGsapGlobal();
+  } else {
+    addEventListener("DOMContentLoaded", (event) => initGsapGlobal());
+  }
+}
+</script>