Web Animations API ile GSAP’siz Animasyonlar

Kütüphanesiz Animasyon: WAAPI ile Hafif ve Hızlı

Artık ek kütüphanelerle sayfa ağırlığını artırmak zorunda değilsin. WAAPI, sadece native JavaScript kullanarak CSS ve JS’in en güçlü yanlarını birleştiriyor.

Basit Bir Başlangıç

const element = document.querySelector('.ball');
element.animate([
  { transform: 'translateY(0)' },
  { transform: 'translateY(-20px)' }
], {
  duration: 300,
  iterations: Infinity,
  direction: 'alternate'
});

Bu örnekte .ball sınıfına sahip element bir top gibi zıplıyor. Ama olay sadece görsel değil -- bu animasyon GPU hızlandırmalı çalışıyor. Tarayıcı, animasyonları main thread’den bağımsız yürüttüğü için performans olarak CSS transition’lardan bile daha akıcı sonuç veriyor.

Neden WAAPI?

• Kütüphane bağımlılığı yok: Ekstra yük, bağımlılık ya da versiyon derdi olmadan native çalışır.
• Performans dostu: Donanım hızlandırma desteğiyle yüksek FPS sağlar.
• Esnek zamanlama: easing, delay, iterations gibi parametrelerle tam kontrol.
• Dinamik kontrol: Animasyonlar durdurulabilir, devam ettirilebilir veya tersine çevrilebilir.
• JS + CSS birlikteliği: CSS keyframe mantığını JS’le yönetme özgürlüğü.

Kontrol Sende!

WAAPI ile oluşturulan her animasyon bir Animation nesnesi döner. Bu sayede animasyonu başlatabilir, durdurabilir, hızını değiştirebilir veya geri sarabilirsin.

const anim = element.animate([...], { duration: 1000, easing: 'ease-in-out' });
anim.pause(); // durdur
anim.play(); // devam et
anim.reverse(); // yönünü değiştir

İstersen animasyon bitince bir callback tetikleyebilirsin:

anim.onfinish = () => console.log('Animasyon tamamlandı!');

Bu yapı zincirleme animasyonlar için mükemmeldir. Örneğin bir elementin kaybolup ardından başka bir elementin görünmesini kolayca senkronize edebilirsin. Eski setTimeout akrobatiklerine elveda! 👋

CSS Keyframe Entegrasyonu

WAAPI, CSS’te tanımlanmış animasyonları da yönetmene izin verir. Örneğin CSS dosyanda @keyframes bounce tanımlayıp, JavaScript üzerinden hızını ya da yönünü kontrol edebilirsin.

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

const ball = document.querySelector('.ball');
const player = ball.animate({ animation: 'bounce 1s infinite' });
player.updatePlaybackRate(2); // animasyonu 2 kat hızlandır

Artık CSS animasyonları statik olmaktan çıkıp, JavaScript’in elinde yaşayan dinamik sistemlere dönüşüyor.

Gerçek Hayatta Kullanım Alanları

• Mikro etkileşimler: Hover, click, focus gibi küçük hareketler.
• Sayfa geçişleri: Router veya SPA yapılarında giriş-çıkış efektleri.
• Scroll tabanlı animasyonlar: IntersectionObserver ile kombinlenebilir.
• Dashboard görselleştirmeleri: Bar, chart veya loading efektleri.
• Oyun benzeri etkileşimler: WAAPI, Canvas veya WebGL ile entegre çalışabilir.

Dikkat Edilmesi Gerekenler

WAAPI modern tarayıcıların çoğunda destekleniyor, ancak Safari hâlâ biraz nazlı. Özellikle mobil sürümlerde bazı API metodları (örneğin updatePlaybackRate) eksik olabilir. Bu nedenle kullanmadan önce:

if ('animate' in Element.prototype) {
  // güvenle kullanabilirsin
}

şeklinde bir kontrol eklemek faydalıdır.

Ayrıca uzun süreli animasyonların mobil cihazlarda pil tüketimini artırabileceğini unutma. Animasyon güzel şeydir, ama pil yüzdesi 3’ken kimse onu fark etmez. 🥰

Ekstra: Zamanlamayı Yönetmek

WAAPI, KeyframeEffect ve AnimationTimeline gibi yapılarla zaman çizelgesi (timeline) bazlı animasyonları da destekler. Yani birden fazla element aynı anda ama farklı gecikmelerle oynatılabilir. Bu sayede sahne geçişleri veya ardışık animasyonlar oluşturmak çok daha kolay hale gelir.

const fade = new KeyframeEffect(element, [
  { opacity: 0 },
  { opacity: 1 }
], { duration: 500 });
const player = new Animation(fade, document.timeline);
player.play();

Bu yapı GSAP’in timeline sistemine oldukça benzer, ancak tamamen native!

Sonuç

Web Animations API, web animasyonlarının geleceğini yeniden tanımlıyor. Sıfır bağımlılık, yüksek performans, hassas zamanlama kontrolü ve modern tarayıcı desteğiyle artık “kütüphanesiz animasyon” devri başladı.

WAAPI ile animasyonun ruhunu kodla yakala: küçük etkileşimlerden büyük sahne geçişlerine kadar her şey artık mümkün.

Ve en güzeli, tek bir import bile yazmadan.