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,110 @@
+<script>
+const split = (text, type = "chars") => {
+  text.setAttribute("aria-label", text.textContent);
+  const splits = new SplitText(text, { type });
+  splits[type].forEach((char) => char.setAttribute("aria-hidden", "true"));
+  return splits[type];
+};
+
+addEventListener("GSAPReady", (event) => {
+
+  const section = document.querySelector("[data-animate='videogrow']");
+  const video = section.querySelector("[data-videogrow='video']");
+  const img = video.children[0];
+
+  const title = split(
+    section.querySelector("[data-videogrow='title']"),
+    "chars"
+  );
+
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: section,
+      start: "top center",
+      end: "bottom bottom+=100%",
+      invalidateOnRefresh: true,
+      scrub: 1,
+    },
+  });
+  
+  gsap.set(
+  	title, 
+  		{
+  		scale: 0,
+			rotation: (i) => Math.random() * 360 - 180,
+  	})
+
+  tl.to(
+    title,
+    {
+      scale: 1,
+      duration: 0.2,
+      rotation: 0,
+      ease: "expo.out",
+      stagger: {
+        each: 0.05,
+        from: "random",
+      },
+    }
+  );
+
+  tl.fromTo(
+    video,
+    {
+      clipPath: "inset(10% 50% 10% 50%)",
+      yPercent: 100,
+    },
+    {
+      ease: "power3",
+      clipPath: "inset(0% 0% 0% 0%)",
+      duration: 1,
+      yPercent: 0,
+    },
+    ".3"
+  );
+
+  tl.fromTo(
+    video,
+    {
+      scale: 0.5,
+      // rotation: 180,
+    },
+    {
+      ease: "back.inOut(.2)",
+      scale: 1,
+      duration: 0.8,
+      // rotation: 0,
+    },
+    "<"
+  );
+
+  tl.fromTo(
+    img,
+    {
+      scale: 2.8,
+      yPercent: 40,
+    },
+    {
+      scale: 1.2,
+      duration: 0.8,
+      delay: 0.2,
+      yPercent: 0,
+    },
+    "<"
+  );
+
+  tl.to(video, {
+    scale: 0.9,
+    ease: "linear",
+  });
+
+  tl.to(
+    img,
+    {
+      scale: 1,
+      ease: "linear",
+    },
+    "<"
+  );
+});
+</script>