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,93 @@
+{
+  /** Section Selector   */
+const createObserver = (section, cb) => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
+        cb(entry.target);
+      }
+    });
+  }, {
+    threshold: 0.2 // This means the callback will fire when at least 10% is visible
+  });
+  observer.observe(section);
+};
+
+  addEventListener("GSAPReady", (event) => {
+    const { lenis } = event.detail;
+
+    const wrapper = document.querySelector("[data-animate='sectionselector']");
+    const items = [...wrapper.children];
+    const highlight = wrapper.querySelector("[data-selector='highlight']");
+    let currentIndex = 0;
+
+    const sections = [...document.querySelectorAll("section")];
+
+    // Navigation height'ini hesapla (logo height'i ve üst/alt boşluklar için)
+    const navWrapper = document.querySelector("[data-module='nav']");
+    const navElement = navWrapper?.querySelector(".nav");
+    const logoElement = navWrapper?.querySelector(".logo-banner-w");
+    const getNavHeight = () => {
+      if (navWrapper && navElement) {
+        // Navigation element'inin toplam height'ini al (padding dahil)
+        const navHeight = navElement.offsetHeight;
+        
+        // Logo element'inin üstündeki boşluğu hesapla
+        if (logoElement) {
+          const logoRect = logoElement.getBoundingClientRect();
+          const navRect = navElement.getBoundingClientRect();
+          const topSpace = logoRect.top - navRect.top;
+          
+          // Logo height'i + üstündeki boşluk + altındaki boşluk
+          return navHeight + topSpace;
+        }
+        
+        return navHeight;
+      }
+      return 0;
+    };
+
+    sections.forEach((section, index) => {
+      createObserver(section, () => {
+        items[currentIndex].classList.remove("current");
+        currentIndex = index;
+        items[currentIndex].classList.add("current");
+        moveHighlightTo(index);
+      });
+    });
+
+let flipAnimation = null
+    const moveHighlightTo = (index) => {
+      const state = Flip.getState(highlight);
+      items[index].appendChild(highlight);
+
+	if (flipAnimation) flipAnimation.kill()
+	flipAnimation = Flip.from(state, {
+        duration: 0.5,
+        ease: "expo.out",
+      });
+    };
+
+    items.forEach((item, index) => {
+      item.addEventListener("click", () => {
+        const targetSection = document.getElementById(items[index].dataset.to);
+        if (targetSection) {
+          const navHeight = getNavHeight();
+          lenis.scrollTo(targetSection, {
+            offset: -navHeight
+          });
+        } else {
+          lenis.scrollTo("#" + items[index].dataset.to);
+        }
+      });
+
+      item.addEventListener("mouseenter", () => {
+        moveHighlightTo(index);
+      });
+
+      item.addEventListener("mouseleave", () => {
+        moveHighlightTo(currentIndex);
+      });
+    });
+  });
+}