Lottie Nedir? Web Sitenizde Animasyonun Doğru Yolu

Bir web sitesini "canlı" hissettiren şey çoğu zaman büyük bir video ya da gösterişli bir slider değildir; butonun tıklandığında verdiği minik tepki, yüklenirken dönen zarif animasyon, formu gönderdiğinizde beliren onay hareketidir. İşte bu detayların arkasındaki modern standart: Lottie.

Bu yazıda Lottie'nin ne olduğunu, GIF ve videodan neden bu kadar üstün olduğunu ve bir web sitesinde nerede kullanılıp nerede kullanılmaması gerektiğini anlatıyoruz.

Lottie Nedir?

Lottie, animasyonları video ya da görüntü olarak değil, matematiksel tarif olarak saklayan açık bir formattır. Tasarımcı animasyonu After Effects gibi bir araçta hazırlar, animasyon JSON adı verilen metin tabanlı bir dosyaya dönüştürülür ve tarayıcı bu tarifi anlık olarak çizer.

Fark şurada: Video, her karenin fotoğrafını saklar. Lottie ise "şu daire, şu eğri boyunca, şu sürede hareket etsin" der. Bu yüzden:

• Dosya boyutu videonun ve GIF'in çok küçük bir kesridir.
• Hangi ekranda açılırsa açılsın (telefon, 4K monitör) görüntü daima jilet gibi keskindir, çünkü vektöreldir.
• Renkleri, hızı, hatta animasyonun parçaları kodla değiştirilebilir.

GIF, Video ve Lottie: Aynı Animasyonun Üç Hali

Özellik	GIF	Video (MP4)	Lottie
Tipik boyut	Megabaytlar	Yüzlerce KB	Genellikle 10-100 KB
Keskinlik	Pikselleşir	Çözünürlüğe bağlı	Her boyutta keskin
Şeffaf arka plan	Sınırlı	Sorunlu	Doğal
Kodla kontrol	Yok	Sınırlı	Tam (renk, hız, etkileşim)

Canlı Örnek: Aynı Dosya, Üç Davranış

Aşağıdaki üç animasyon aynı 3 KB'lik .lottie dosyasıdır ve kendi sunucumuzdan yükleniyor. Tek fark koddaki hız parametresi. Video ile bunu yapmak için üç ayrı dosya render etmeniz gerekirdi; Lottie'de tek satır değişiyor:

Örnek animasyon LottieFiles resmi dokümantasyonundan alınmıştır ve sitemizde kendi sunucumuzdan servis edilmektedir.

Siteye Nasıl Eklenir? İki Satırlık İş

Klasik HTML sitede resmi web bileşeni yeterli:

<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js" type="module"></script>

<dotlottie-wc src="/animasyon.lottie" autoplay loop
  style="width:200px;height:200px"></dotlottie-wc>

React / Next.js projesinde resmi paketle:

npm install @lottiefiles/dotlottie-react

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

<DotLottieReact src="/animasyon.lottie" autoplay loop />

Hepsi bu. Animasyon dosyasını kendi sunucunuzdan servis etmek (bizim yaptığımız gibi) hem hız hem KVKK açısından en temiz yoldur.

2026'da Lottie: dotLottie Dönemi

Lottie ekosistemi son yıllarda ciddi olgunlaştı ve güncel standart artık dotLottie (.lottie) formatı:

• %70-80 daha küçük dosya: .lottie, animasyon verisini sıkıştırılmış tek pakette taşır; klasik JSON'a göre boyut kabaca beşte bire iner.
• 2-3 kat hızlı ayrıştırma: Modern oynatıcılar WASM tabanlı çizim motoru kullanır ve .lottie dosyalarını eşdeğer JSON'dan çok daha hızlı işler.
• GPU ile çizim: Mayıs 2026 itibarıyla resmi web oynatıcısı animasyonları ekran kartında çiziyor; işlemci yükü düşüyor, kareler akıcılaşıyor.
• Tek dosyada çoklu animasyon ve tema: Bir .lottie paketi birden fazla animasyonu, renk temasını ve etkileşim durumunu birlikte taşıyabiliyor.

Kısacası birkaç yıl önce "şık ama dikkatli kullan" kategorisindeki teknoloji, bugün üretim standardı haline geldi. Aylık milyonlarca geliştirici resmi oynatıcı paketlerini indiriyor.

Web Sitenizde Nerede Kullanmalısınız?

Mikro etkileşimler

Beğeni kalbi, sepete ekleme onayı, menü açılış hareketi. Kullanıcının eylemine anında ve zarif tepki veren bu detaylar, sitenin "kaliteli hissettirmesinin" en ucuz yoludur.

Yükleme durumları

Boş bir beyaz ekran yerine markanıza özel hafif bir animasyon, algılanan bekleme süresini kısaltır. Lottie dosyası küçük olduğu için yükleme animasyonunun kendisi yüklemeyi yavaşlatmaz.

Boş durumlar ve hata sayfaları

"Sepetiniz boş", "Sonuç bulunamadı", 404 sayfası. Kullanıcının hayal kırıklığı yaşadığı anları sempatik bir ana çeviren en etkili araçtır.

Anlatım ve onboarding

Bir hizmetin nasıl çalıştığını üç adımda anlatan hafif animasyonlar, uzun paragrafların yapamadığını yapar. İnsanlar artık okumuyor; izliyor ve tarıyor.

Nerede Kullanmamalısınız?

Dürüst olalım, her teknoloji gibi Lottie de yanlış kullanılabilir:

• Aynı ekranda çok sayıda ağır animasyon: Her biri hafif olsa da onlarcası bir arada işlemciyi yorar. Ekran başına bir iki anlamlı animasyon kuraldır.
• Fotoğrafik içerik: Lottie vektörel çizimler içindir; gerçek görüntü gerekiyorsa video doğru araçtır.
• Hareket hassasiyeti olan kullanıcılar: İyi bir uygulama, işletim sisteminin "hareketi azalt" tercihine saygı duyar ve animasyonları kısar. Erişilebilirlik süs değil gerekliliktir.

Biz Nasıl Kullanıyoruz?

Hitit Medya projelerinde animasyonu dekor olarak değil, geri bildirim aracı olarak kullanırız: her hareketin bir sebebi olmalı. Mikro etkileşim yaklaşımımızı e-ticarette mikro etkileşimler yazımızda detaylı anlatmıştık. Kullanıcı deneyimini merkeze alan bir arayüz düşünüyorsanız UI/UX tasarım hizmetimize göz atabilirsiniz.

Sonuç

Lottie, "animasyonlu site yavaş olur" ezberini bozan teknolojidir: doğru kullanıldığında siteniz hem daha canlı hem daha hafif olur. dotLottie formatı ve GPU destekli oynatıcılarla 2026'da bu alan artık deneysel değil, profesyonel standart. Fark, teknolojinin kendisinde değil, onu ölçülü ve amaçlı kullanan tasarım disiplinindedir.