Kullanım Kılavuzu

Bu sayfa, gelişmiş özellikleri özelleştirmek için faydalı ipuçları sunar.

Sayma Animasyonu (GSAP)

Bu kılavuz, sayaç animasyonunu Webflow'da özel GSAP kodunuzu kullanarak tam olarak nasıl kuracağınızı açıklar.

Bu Animasyon Ne Yapar:

Sayaç animasyonu otomatik olarak şuradan sayar: 0 öğenin içine koyduğunuz sayıya kadar — sayıda şunlar olsa bile: özel karakterler “+”, “%”, “K” gibi vb. Örnek: 250+ → şuradan sayar: 0 to 250+.

Animasyon başlar yalnızca kullanıcı sayıyı görünüme kaydırdığında.

Kurulum (Yapı)

Adım 1 — Bir sarmalayıcı ekleyin

Add a div bloğu
Şu sınıfı verin: counter_wrapper

Adım 2 — Sayı öğesini ekleyin

Sarmalayıcının içine bir Metin Bloğu
Şu sınıfı verin: counter
Nihai sayınızı metnin içine yazın (örnek: 450+, 2,500, 90%, etc.)

Webflow Özel Kod Yerleşimi

Adım 1 — GSAP + ScrollTrigger ekleyin

GSAP CDN scriptlerinizi şuraya yerleştirin:
Project Settings → Custom Code → Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Adım 2 — Özel scriptinizi ekleyin

Tam kodunuzu şuraya yapıştırın:
Project Settings → Custom Code → Footer

<script>

  gsap.registerPlugin(ScrollTrigger);

  document.addEventListener("DOMContentLoaded", () => {
    initCounterAnimations();
  });

  /* ========== GSAP COUNTER ========== */
  function initCounterAnimations() {
    const counters = document.querySelectorAll(".counter");

    counters.forEach((counter) => {
      const targetText = counter.textContent.trim();
      const targetNumber = parseFloat(targetText.replace(/[^\d.]/g, "")) || 0;
      const suffix = targetText.replace(/[\d.,\s]/g, "");

      // Start from 0
      gsap.set(counter, { innerText: 0 });

      gsap.to(counter, {
        innerText: targetNumber,
        duration: 3.5,
        ease: "power2.out",
        snap: { innerText: 1 },
        scrollTrigger: {
          trigger: counter,
          start: "top 85%",
          toggleActions: "play none none reset"
        },
        onUpdate: function () {
          const value = Math.ceil(this.targets()[0].innerText);
          counter.innerText = value.toLocaleString("en-US") + suffix;
        }
      });
    });
  }
</script>

Şunun içindeki metne bakar: .counter ve sayı kısmını çıkarır.
Animasyon başlamadan önce sayacı 0'a sıfırlar.
GSAP kullanarak şuradan akıcıca sayar: 0 → nihai sayınıza.
Animasyon, kullanıcı şuraya kaydırdığında başlar: görünüm yüksekliğinin %85'i (görünür alana yakın).
Animasyon süresini şu değeri değiştirerek ayarlayabilirsiniz: duration.
Animasyon yumuşamasını şu değeri değiştirerek ayarlayabilirsiniz: ease.
Animasyonun kaydırma başlangıç noktasını şu değeri değiştirerek ayarlayabilirsiniz: start.

Sayma Animasyonunu Kaldırma

GSAP sayı sayma animasyonunu projenizden kaldırmak isterseniz şu adımları izleyin:

Şuraya gidin: Site Settings → Custom Code → Footer Code.
Aşağıdaki scripti şu yorumla bulun: GSAP COUNTER
Bu yorumun altında görünen scripti silin. Ve işte bu kadar
Ya da kodu tutmak ama animasyonu bir öğeden kaldırmak isterseniz, yalnızca sınıfı kaldırın: counter

Referans Sekme Geçişi (GSAP)

Bu kılavuz, aşağıdakini tam olarak nasıl kurup özelleştireceğinizi açıklar: Referans Sekme Geçişi Webflow'da özel GSAP kodunuzu kullanarak tam olarak nasıl kuracağınızı açıklar.

Yapınız

Sekme Yapısı:
‍
testimonial_tabs (Parent)
├── testimonial-tabs_menu
├── testimonial-tabs_link [attribute: "data-tab=X" ; X = 1,2,3,...]
├── active-circle [inside the active tab link]
└── testimonial-tabs_content

Yazar Görselleri İçin:
‍
testimonial-image_wrap(Parent)
├── testimonial_image [attribute: "data-tab=X" ; X = 1,2,3,...]
└── testimonial_image

Webflow Özel Kod Yerleşimi

Adım 1 — GSAP + ScrollTrigger ekleyin

GSAP CDN scriptlerinizi şuraya yerleştirin:
Project Settings → Custom Code → Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Adım 2 — Özel scriptinizi ekleyin

Tam kodunuzu şuraya yapıştırın:
Project Settings → Custom Code → Footer

<script>

  gsap.registerPlugin(ScrollTrigger);

  document.addEventListener("DOMContentLoaded", () => {
    initTestimonialTabs();
  });

   /* ========== GSAP TESTIMONIAL TABS ========== */
  function initTestimonialTabs() {
    const tabMenu = document.querySelector(".testimonial-tabs_menu");
    const tabs = document.querySelectorAll(".testimonial-tabs_link");
    const activeCircle = document.querySelector(".active-circle");
    const images = document.querySelectorAll(".testimonial-image_wrap .testimonial_image");

    const moveActiveCircle = (target) => {
      const rect = target.getBoundingClientRect();
      const parentRect = tabMenu.getBoundingClientRect();
      const offsetX = rect.left - parentRect.left + rect.width / 2 - activeCircle.offsetWidth / 2;

      gsap.to(activeCircle, {
        x: offsetX,
        duration: 0.4,
        ease: "power2.out"
      });
    };

    const showImage = (tabValue) => {
      images.forEach((img) => {
        const isActive = img.getAttribute("data-tab") === tabValue;
        gsap.to(img, {
          autoAlpha: isActive ? 1 : 0,
          zIndex: isActive ? 10 : 1,
          duration: 0.6,
          ease: "power1.inOut"
        });
      });
    };

    // Initial setup
    const initialTab = document.querySelector(".testimonial-tabs_link.w--current") || tabs[0];
    
    gsap.set(activeCircle, { x: 0 });
    gsap.set(images, { autoAlpha: 0 });
    if (initialTab) {
      moveActiveCircle(initialTab);
      showImage(initialTab.getAttribute("data-tab"));
      gsap.set(`.testimonial_image[data-tab="${initialTab.getAttribute("data-tab")}"]`, { autoAlpha: 1 });
    }

    // Click handlers
    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        moveActiveCircle(tab);
        showImage(tab.getAttribute("data-tab"));
      });
    });
  }
  
</script>

Aktif çemberi, tıklanan sekmeye uyacak şekilde aktif sekmenin altına akıcıca kaydırır.
Bir sekmeye tıklandığında, GSAP:
- Eşleşen görseli şunu kullanarak bulur: data-tab
- O görseli belirginleştirir
- Diğerlerini soldurur
- Aktif görseli öne getirir (zIndex: 10)
Varsayılan sekmeyi algılar
- Sayfa yüklendiğinde şunu arar: .testimonial-tabs_link.w--current
- Ya da hiçbiri seçili değilse ilk sekmeyi
Yüklenirken çemberi ve görseli anında canlandırır. Böylece herhangi bir etkileşimden önce ilk görünüm doğru olur.

Gelecekte Nasıl Daha Fazla Sekme Eklenir

Duplicate a tab link → change data-tab="x"
Aktif çemberi tekrar eklemeye gerek yok (yalnızca ilkine gerekir)
Duplicate an image → change data-tab="x"
Script bunu otomatik olarak algılar.

Referans Sekme Geçiş Animasyonunu Kaldırma

GSAP referans sekme geçiş animasyonunu projenizden kaldırmak isterseniz şu adımları izleyin:

Şuraya gidin: Site Settings → Custom Code → Footer Code.
Aşağıdaki scripti şu yorumla bulun: GSAP TESTIMONIAL TABS
Bu yorumun altında görünen scripti silin.
Öğelerinizden özel öznitelikleri kaldırın:
- Form tab link → remove attribute [data-tab="x"]
- Form images → remove attribute [data-tab="x"]

Her İki Animasyon İçin Optimize Kod (GSAP)

Aşağıda, bu web sitesinde kullandığımız sayaç ve referans sekme geçiş animasyonlarının her ikisi için optimize (sadeleştirilmiş) kodu görebilirsiniz:

Webflow Özel Kod Yerleşimi

Adım 1 — GSAP + ScrollTrigger ekleyin

GSAP CDN scriptlerinizi şuraya yerleştirin:
Project Settings → Custom Code → Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Adım 2 — Özel scriptinizi ekleyin

Tam kodunuzu şuraya yapıştırın:
Project Settings → Custom Code → Footer

<script>

  gsap.registerPlugin(ScrollTrigger);

  document.addEventListener("DOMContentLoaded", () => {
    initTestimonialTabs();
    initCounterAnimations();
  });

  /* ========== GSAP TESTIMONIAL TABS ========== */
  function initTestimonialTabs() {
    const tabMenu = document.querySelector(".testimonial-tabs_menu");
    const tabs = document.querySelectorAll(".testimonial-tabs_link");
    const activeCircle = document.querySelector(".active-circle");
    const images = document.querySelectorAll(".testimonial-image_wrap .testimonial_image");

    const moveActiveCircle = (target) => {
      const rect = target.getBoundingClientRect();
      const parentRect = tabMenu.getBoundingClientRect();
      const offsetX = rect.left - parentRect.left + rect.width / 2 - activeCircle.offsetWidth / 2;

      gsap.to(activeCircle, {
        x: offsetX,
        duration: 0.4,
        ease: "power2.out"
      });
    };

    const showImage = (tabValue) => {
      images.forEach((img) => {
        const isActive = img.getAttribute("data-tab") === tabValue;
        gsap.to(img, {
          autoAlpha: isActive ? 1 : 0,
          zIndex: isActive ? 10 : 1,
          duration: 0.6,
          ease: "power1.inOut"
        });
      });
    };

    // Initial setup
    const initialTab = document.querySelector(".testimonial-tabs_link.w--current") || tabs[0];
    
    gsap.set(activeCircle, { x: 0 });
    gsap.set(images, { autoAlpha: 0 });
    if (initialTab) {
      moveActiveCircle(initialTab);
      showImage(initialTab.getAttribute("data-tab"));
      gsap.set(`.testimonial_image[data-tab="${initialTab.getAttribute("data-tab")}"]`, { autoAlpha: 1 });
    }

    // Click handlers
    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        moveActiveCircle(tab);
        showImage(tab.getAttribute("data-tab"));
      });
    });
  }

  /* ========== GSAP COUNTER ========== */
  function initCounterAnimations() {
    const counters = document.querySelectorAll(".counter");

    counters.forEach((counter) => {
      const targetText = counter.textContent.trim();
      const targetNumber = parseFloat(targetText.replace(/[^\d.]/g, "")) || 0;
      const suffix = targetText.replace(/[\d.,\s]/g, "");

      // Start from 0
      gsap.set(counter, { innerText: 0 });

      gsap.to(counter, {
        innerText: targetNumber,
        duration: 3.5,
        ease: "power2.out",
        snap: { innerText: 1 },
        scrollTrigger: {
          trigger: counter,
          start: "top 85%",
          toggleActions: "play none none reset"
        },
        onUpdate: function () {
          const value = Math.ceil(this.targets()[0].innerText);
          counter.innerText = value.toLocaleString("en-US") + suffix;
        }
      });
    });
  }
</script>