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,30 @@
+// https://codepen.io/GreenSock/pen/RwLepdQ?editors=1010
+
+addEventListener("GSAPReady", (event) => {
+  const wrapper = document.querySelector("[data-animate='flip']");
+  const toggles = [...wrapper.querySelector("[data-flip='toggle']").children];
+  const items = wrapper.querySelector("[data-flip='item']");
+
+  // console.log("flip", wrapper, toggles, items);
+
+  const flipGridList = () => {
+    const state = Flip.getState(items.children);
+    items.classList.toggle("list");
+    
+    Flip.from(state, {
+      duration: 0.8,
+      ease: "expo.out",
+      onComplete: () => {   
+      	ScrollTrigger.refresh();
+       }
+    });
+  };
+
+  toggles.forEach((toggle, index) => {
+    toggle.addEventListener("click", () => {
+      toggles[0].classList.toggle("current");
+      toggles[1].classList.toggle("current");
+      flipGridList();
+    });
+  });
+});