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,32 @@
+<script>
+addEventListener("GSAPReady", (event) => {
+  // console.log("marquee");
+  const wrapper = document.querySelector("[data-animate='marquee']");
+  if (!wrapper) return;
+
+  const sections = [...wrapper.querySelectorAll("[data-marquee='line']")];
+
+  gsap.fromTo(
+    sections,
+    {
+      x: (i) =>
+        i % 2 === 0
+          ? sections[i].offsetWidth / 4
+          : -sections[i].offsetWidth / 4,
+    },
+    {
+      x: (i) =>
+        i % 2 === 0
+          ? -sections[i].offsetWidth / 4
+          : sections[i].offsetWidth / 4,
+      scrollTrigger: {
+        trigger: wrapper,
+        start: "top bottom",
+        end: "bottom top",
+        scrub: true,
+        // invalidateOnRefresh: true,
+      },
+    }
+  );
+});
+</script>