GSAP Nedir?
GSAP (GreenSock Animation Platform), tarayıcıda çalışan bir JavaScript animasyon kütüphanesidir. CSS özelliklerini, SVG çizimlerini, canvas ve WebGL sahnelerini, hatta sayısal değer taşıyan her JavaScript nesnesini zaman içinde hassas biçimde değiştirebilir. Sitenin hangi altyapıyla kurulduğuna bakmaz: düz HTML, React ya da Vue fark etmez.
Gücünü zaman çizelgelerinden (timeline) alır. Onlarca hareketi salisesine kadar sıralayabilir, birbirine bağlayabilir, durdurup geri sarabiliriz. ScrollTrigger eklentisi bu çizelgeleri sayfanın kaydırılmasına bağlar; bir bölümü ekrana sabitleyip içeriğini ziyaretçi kaydırdıkça değiştirmek gibi anlatımlar böyle kurulur. SplitText metni harf, kelime ya da satırlara ayırır; MorphSVG ve DrawSVG çizimleri dönüştürür ya da çizerek açar.
GreenSock tarafından geliştirilen GSAP, 2024'te Webflow çatısına katıldı; 2025'ten beri, eskiden ücretli olan eklentileri de dahil olmak üzere ticari projelerde de ücretsiz. Milyonlarca sitede kullanılmasının nedeni, yıllardır tarayıcılar arasındaki farkları sizin yerinize sessizce çözmesi.
GSAP'yi Nerede Kullanıyoruz?
Hareketi süs olsun diye değil, anlatıma hizmet etsin diye kullanıyoruz. Projelerimizde GSAP'ye en çok şu işlerde başvuruyoruz:
Kaydırmaya Bağlı Anlatım
ScrollTrigger ile bir bölümü sabitleyip ziyaretçi kaydırdıkça adımları, ekranları ya da ürün özelliklerini sırayla gösteriyoruz. Karmaşık bir hizmet böylece birkaç saniyede anlaşılıyor.
Açılış ve Geçişler
Sayfanın ilk saniyesini, başlığın gelişini, menülerin açılıp kapanmasını tek bir zaman çizelgesinde kuruyoruz; her öğe doğru anda ve doğru hızla geliyor.
Logo ve Çizim Animasyonları
Marka kimliği projelerinde logoyu çizerek açan ya da biçimini dönüştüren SVG animasyonları hazırlıyoruz; aynı dosya hem sitede hem sunumlarda kullanılıyor.
Küçük Etkileşimler
Butonlar, kartlar ve formlar ziyaretçinin hareketine kısa ve anlamlı tepkiler veriyor. Bu tepkiler neyin tıklanabildiğini ve neyin değiştiğini açıkça gösteriyor.
Neden GSAP?
Akıcı ve Hızlı
GSAP animasyonları tarayıcının çizim döngüsüyle eş zamanlı çalıştırır. Dönüşüm ve saydamlık gibi ekran kartının kolayca işlediği özellikleri hareket ettirdiğimizde sayfa telefonlarda da takılmadan akar.
Her Tarayıcıda Aynı Sonuç
Tarayıcılar arasındaki küçük farkları kütüphane kendisi çözer; Safari'de, Chrome'da ya da Firefox'ta aynı hareketi görürsünüz.
Erişilebilirlik Gözetilerek
gsap.matchMedia() ile ekran boyutuna ve ziyaretçinin “hareketi azalt” tercihine göre farklı davranışlar tanımlıyoruz. Hareketten rahatsız olan biri içeriği hareketsiz ama eksiksiz görür.
Projenizde Nasıl İlerliyoruz?
Önce hareketin neyi anlatacağına karar veriyoruz: hangi bölümün kaydırmayla açılacağını, neyin sabit kalacağını Figma'daki tasarım üzerinde birlikte konuşuyoruz. Ardından animasyonları kodda kuruyor ve gerçek cihazlarda deniyoruz.
Yayından önce sayfanın hızını PageSpeed Insights ile ölçüyor, animasyonların yüklemeyi yavaşlatmadığından emin oluyoruz. Kendi sitelerimizde de aynı yolu izliyoruz: MHS Links AI'ın ana sayfasındaki animasyonlar GSAP, ScrollTrigger ve gsap.matchMedia() ile çalışıyor.
