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,166 @@
+<script>
+{
+/** Utility Functions */
+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];
+};
+
+const getParams = (item) => {
+  const { duration, delay, stagger, ease, type } = item.dataset;
+  const params = {
+    duration: 1.2,
+    delay: 0,
+    type: "chars",
+  };
+
+  if (duration) params.duration = parseFloat(duration);
+  if (delay) params.delay = parseFloat(delay);
+  if (type && (type === "chars" || type === "words" || type === "lines"))
+    params.type = type;
+
+  return params;
+};
+
+const baseAnimation = (item) => {
+  const params = getParams(item);
+  return {
+    duration: params.duration,
+    delay: params.delay,
+    ease: "expo.out",
+    //   stagger each item so the letters come in one after the other
+    stagger: {
+      each: 0.04,
+      from: "start",
+    },
+    scrollTrigger: {
+      trigger: item,
+      // use scrolltrigger to trigger on enter and reset on exit
+      toggleActions: "play reset play reset",
+    },
+  };
+};
+
+/** (1) Split Reveal Animation */
+function createSplitRevealAnimation(item) {
+  const params = getParams(item); // 1. get params from attributes
+  const text = split(item, params.type); // 2. split the text
+  item.style.overflow = "hidden"; // 3. set container to overflow
+
+  // 4. create the animation
+  return gsap.fromTo(
+    text,
+    { yPercent: 120 },
+    {
+      ...baseAnimation(item),
+      yPercent: 0,
+    }
+  );
+}
+
+function createScrambledAnimation(item) {
+  const text = item.textContent;
+  const randomText = Array(text.length)
+    .fill()
+    .map(() => String.fromCharCode(Math.floor(Math.random() * (90 - 65) + 65)))
+    .join("")
+    .toLowerCase();
+
+  return gsap.fromTo(
+    item.children[0],
+    {
+      scrambleText: randomText,
+    },
+    {
+      ...baseAnimation(item),
+      scrambleText: text,
+      chars: text,
+    }
+  );
+}
+
+function createAlphaAnimation(item) {
+
+  const params = getParams(item); // 1. get params from attributes
+  const text = split(item, "chars"); // 2. split the text
+
+  return gsap.fromTo(
+    text,
+    { autoAlpha: 0 },
+    {
+      ...baseAnimation(item),
+      autoAlpha: 1,
+      stagger: {
+        each: 0.02,
+        from: "random",
+      },
+    }
+  );
+}
+
+function createSideAnimation(item) {
+  const params = getParams(item);
+  const outer = split(item, "chars");
+  outer.forEach((char) => {
+    char.style.overflow = "hidden";
+  });
+  const inner = split(item.children[0], "chars");
+
+  return gsap.fromTo(
+    inner,
+    { x: 100 },
+    {
+      ...baseAnimation(item),
+      x: 0,
+      stagger: {
+        each: 0.02,
+        from: "end",
+      },
+    }
+  );
+}
+
+function createUpDownAnimation(item) {
+  const params = getParams(item);
+  const outer = split(item, "chars");
+  outer.forEach((char) => {
+    char.style.overflow = "hidden";
+  });
+  const inner = split(item.children[0], "chars");
+
+  return gsap.fromTo(
+    inner,
+    {
+      yPercent: (i) => {
+        return i % 2 === 0 ? 100 : -100;
+      },
+    },
+    {
+      ...baseAnimation(item),
+      yPercent: 0,
+      stagger: {
+        each: 0.02,
+        from: "random",
+      },
+    }
+  );
+}
+
+/** Main Text Effect Wrapper */
+addEventListener("GSAPReady", (event) => {
+  const texts = [...document.querySelectorAll('[data-animate="text"]')];
+
+  texts.forEach((item) => {
+    if (item.dataset.type === "chars") createSplitRevealAnimation(item);
+    else if (item.dataset.type === "words") createSplitRevealAnimation(item);
+    else if (item.dataset.type === "scramble") createScrambledAnimation(item);
+    else if (item.dataset.type === "alpha") createAlphaAnimation(item);
+    else if (item.dataset.type === "side") createSideAnimation(item);
+    else if (item.dataset.type === "updown") createUpDownAnimation(item);
+  });
+});
+
+}
+</script>