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,71 @@
+<script>
+{
+  addEventListener("GSAPReady", (event) => {
+    const wrapper = document.querySelector("[data-animate='footerlogo']");
+    if (!wrapper) return;
+
+    const paths = [...wrapper.querySelectorAll("path")].reverse();
+    const lastPath = paths[paths.length - 1];
+
+    // Configuration for the footer logo animation
+    const FOOTER_ANIMATION_CONFIG = {
+      STAGGER: 0.05,
+      VISIBILITY_DURATION: 0.1,
+    };
+
+    // Set initial state
+    gsap.set(paths, {
+      autoAlpha: 0,
+    });
+
+    const animateFooterLogo = () => {
+      // Reset the last path visibility before starting the animation
+      gsap.set(lastPath, { autoAlpha: 0 });
+
+      const tl = gsap.timeline();
+
+      paths.forEach((path, index) => {
+        const baseDelay = index * FOOTER_ANIMATION_CONFIG.STAGGER;
+        const isLastPath = index === paths.length - 1;
+
+        // Flash animation
+        tl.to(
+          path,
+          {
+            autoAlpha: 1,
+            duration: 0.1,
+            ease: "none",
+          },
+          baseDelay
+        );
+
+        // Only fade out if it's not the last path
+        if (!isLastPath) {
+          tl.to(
+            path,
+            {
+              autoAlpha: 0,
+              duration: 0.1,
+              ease: "none",
+            },
+            baseDelay + FOOTER_ANIMATION_CONFIG.VISIBILITY_DURATION
+          );
+        }
+      });
+
+      return tl;
+    };
+
+    // Create the scroll trigger
+    ScrollTrigger.create({
+      trigger: wrapper,
+      start: "top bottom",
+      end: "bottom top",
+      onEnter: () => animateFooterLogo(),
+      onEnterBack: () => animateFooterLogo(),
+    });
+
+    // console.log(event.detail);
+  });
+}
+</script>