📌 GSAP (GreenSock Animation Platform) Temelleri ve İleri Kullanımı

1️⃣ GSAP Nedir?

GSAP, web için profesyonel JavaScript animasyon kütüphanesidir.
CSS, SVG, canvas, DOM veya JavaScript objeleri üzerinde animasyon yapılabilir.
Performanslıdır, requestAnimationFrame ile çalışır ve frame kayıplarını minimize eder.

Temel Kavramlar:

Kavram	Açıklama
Tween	Belirli bir süre boyunca bir değeri başka bir değere animasyonla geçirir.
Timeline	Birden fazla tween’in sıralı veya eşzamanlı olarak yönetilmesini sağlar.
Keyframes	Tek bir tween içinde birden fazla değişikliği yüzdelik olarak tanımlar.
Stagger	Birden çok elementi art arda animasyonlandırmayı sağlar.

2️⃣ Tween Kullanımı

`.to()` ve `.from()`

// #star elementini x ekseninde 500px hareket ettir
gsap.to("#star", { duration: 2, x: 500, ease: "power1.inOut" });

// #circle elementi başlangıçtan 0 opacity ile başlat
gsap.from("#circle", { duration: 1, opacity: 0 });

to: Mevcut durumdan belirlenen değere geçer.
from: Belirlenen başlangıç değerinden mevcut duruma geçer.
fromTo: Hem başlangıç hem bitiş değerini belirler.

gsap.fromTo("#square",
  { x: 0, opacity: 0 },
  { x: 300, opacity: 1, duration: 2 }
);

📌 GSAP (GreenSock Animation Platform) Temelleri ve İleri Kullanımı

1️⃣ GSAP Nedir?

Temel Kavramlar:

2️⃣ Tween Kullanımı

.to() ve .from()

3️⃣ Timeline Kullanımı

`.to()` ve `.from()`