Gereksinimler ve Ön Hazırlık

Çalışmaya başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün yüklü olduğundan emin olmalısınız. React projenizde Framer Motion ve React Router kütüphanelerini kullanacağız. Projenizi başlatmak ve gerekli paketleri kurmak için aşağıdaki komutları terminalinizde çalıştırın.

npx create-react-app sayfa-gecisleri
cd sayfa-gecisleri
npm install framer-motion react-router-dom

Bu komutlar, projenizin temel yapısını oluşturacak ve animasyon kütüphanesi ile yönlendirme aracını projenize dahil edecektir. Kurulum tamamlandıktan sonra, projenin src dizininde düzenli bir klasör yapısı oluşturmanız önerilir.

React Router ve AnimatePresence Entegrasyonu

Framer Motion ile sayfalar arası geçiş yaparken, bileşenlerin DOM'dan (Document Object Model) kaldırılmadan önce animasyonlarını tamamlamasını sağlamak için AnimatePresence bileşenine ihtiyaç duyarız. Bu bileşen, bir bileşen React ağacından çıktığında animasyon tetiklenmesini mümkün kılar.

import { Routes, Route, useLocation } from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';

function App() {
  const location = useLocation();

  return (
    
      
        
        
      
    
  );
}

Burada mode="wait" parametresi, bir sonraki sayfa gelmeden önce mevcut sayfanın animasyonunun bitmesini bekler. key={location.pathname} kullanımı ise, rota değiştiğinde AnimatePresence bileşeninin bunu algılamasını sağlar.

Sayfa Geçiş Animasyonu İçin Reusable (Yeniden Kullanılabilir) Bileşen Oluşturma

Her sayfa için ayrı animasyon kodu yazmak yerine, bir sarmalayıcı (wrapper) bileşen oluşturmak en iyi pratiklerden biridir. Bu sayede animasyonları merkezi bir yerden yönetebilirsiniz.

import { motion } from 'framer-motion';

const PageTransition = ({ children }) => {
  return (
    
      {children}
    
  );
};

Bu bileşen, sayfa ilk yüklendiğinde 20 piksel soldan sağa doğru bir kayma ve opaklık artışı sağlar. Sayfadan çıkarken ise tam tersi bir animasyonla kaybolur. transition nesnesi ise animasyonun hızını ve ivmesini kontrol eder.

Animasyon Yöntemlerinin Karşılaştırılması

Sayfa geçişlerinde kullanabileceğiniz farklı yöntemlerin avantaj ve dezavantajlarını aşağıdaki tabloda inceleyebilirsiniz:

Adım Adım Sayfa Geçişlerini Uygulama

Şimdi oluşturduğumuz PageTransition bileşenini sayfalarımıza entegre edelim. Bu işlem, her sayfanın aynı animasyon mantığıyla çalışmasını sağlayacaktır.

const Home = () => (
  
    


Ana Sayfa
    
Hoş geldiniz!
  
);

const About = () => (
  
    


Hakkımızda
    
Bizim hakkımızda bilgiler.
  
);

Bu yapı, uygulamanızın her sayfasında tutarlı bir kullanıcı deneyimi sunar. PageTransition bileşeni içerisindeki motion.div etiketi, React bileşenini Framer Motion'ın animasyon yetenekleriyle donatır.

Dikkat Edilmesi Gereken Performans İpuçları

Animasyonlar, özellikle düşük donanımlı cihazlarda tarayıcıyı yorabilir. Performansı artırmak için şu noktaları unutmayın:

• Hardware Acceleration: Animasyonlarda sadece transform ve opacity özelliklerini kullanın. Bu özellikler GPU (Grafik İşlem Birimi) tarafından işlenir.
• Layout Animation: Elemanların konumlarını değiştirirken layout özelliğini kullanarak Framer Motion'ın otomatik hesaplama yapmasını sağlayın.
• Gereksiz Render'lar: React.memo kullanarak animasyon içeren bileşenlerin gereksiz yere tekrar render edilmesini engelleyin.

Güvenlik Uyarısı: Animasyonlar doğrudan web güvenliğini (XSS veya SQL Injection gibi) etkilemese de, animasyon tetikleyicilerinde kullanıcıdan gelen verileri kullanırken her zaman "sanitizasyon" (veriyi temizleme) yapmayı unutmayın. Ayrıca, karmaşık animasyonların erişilebilirlik (a11y) standartlarını bozmadığından emin olun.

Sıkça Sorulan Sorular

Framer Motion animasyonları mobil cihazlarda kasma yapar mı?

Doğru kullanıldığında (sadece transform ve opacity özellikleri ile) mobil cihazlarda oldukça akıcı çalışır. Ancak çok fazla DOM elemanını aynı anda hareket ettirmekten kaçınmalısınız.

AnimatePresence neden çalışmıyor?

Genellikle key prop'unun eksik olması veya Routes bileşenine location prop'unun geçilmemesi nedeniyle çalışmaz. Kodunuzda location objesini useLocation ile aldığınızdan emin olun.

Animasyonları tamamen devre dışı bırakabilir miyim?

Evet, kullanıcıların işletim sistemi ayarlarından "hareketi azalt" (reduce motion) seçeneğini seçip seçmediğini kontrol edebilir ve buna göre animasyonları şartlı olarak devre dışı bırakabilirsiniz.

Sayfa yüklendiğinde animasyonun hemen başlamasını nasıl sağlarım?

initial prop'una başlangıç değerlerini vererek ve animate prop'u ile hedef değerleri belirleyerek sayfa yüklendiği anda animasyonun tetiklenmesini sağlayabilirsiniz.

Framer Motion ile sadece CSS animasyonları mı yaparım?

Hayır, Framer Motion fizik tabanlı animasyonlar, sürükle-bırak etkileşimleri ve jest tabanlı (gesture) animasyonlar için de oldukça güçlüdür.

İleri Seviye Animasyon Senaryoları: Sayfa Geçişlerinde "Shared Element" Kullanımı

Framer Motion'ın en etkileyici özelliklerinden biri, farklı sayfalar arasında görsel bir devamlılık sağlayan layoutId kullanımıdır. Bu teknik, bir sayfadaki görselin diğer sayfaya sanki aynı öğeymiş gibi "uçarak" geçmesini sağlar. Özellikle e-ticaret sitelerinde ürün detay sayfalarına geçiş yaparken kullanıcı deneyimini üst seviyeye taşır.

Aşağıdaki örnekte, bir liste öğesinden detay sayfasına geçiş yaparken öğenin nasıl dönüştüğünü görebilirsiniz:

// Liste öğesi (Parent)

  



// Detay sayfası (Child)

  

  
Ürün Başlığı

Bu yöntem, tarayıcının yeniden boyama (repaint) maliyetini optimize ederken, kullanıcıya akıcı bir arayüz hissi verir. Ancak dikkat etmeniz gereken en önemli nokta, layoutId değerlerinin tüm sayfalar boyunca benzersiz ve tutarlı olmasıdır.

Animasyonlarda Performans İzleme ve Hata Ayıklama

Karmaşık animasyonlar, özellikle düşük donanımlı mobil cihazlarda ana iş parçacığını (main thread) kilitleyebilir. Framer Motion ile çalışırken animasyonlarınızın performansını ölçmek ve olası darboğazları gidermek için şu stratejileri izlemelisiniz:

• Will-change Kullanımı: Tarayıcıya hangi özelliğin değişeceğini önceden bildirmek için CSS will-change: transform; özelliğini animasyonlu bileşenlerinize ekleyin.
• GPU Hızlandırma: Animasyonlarınızda top, left veya width gibi özellikler yerine transform (scale, rotate, translate) ve opacity kullanmaya özen gösterin. Bu özellikler GPU tarafından işlenir.
• DevTools Kullanımı: Chrome Geliştirici Araçları'ndaki "Rendering" sekmesini açarak "Layer Borders" seçeneğini aktif edin. Eğer animasyon sırasında ekranın sürekli yeniden boyandığını (yeşil kutucuklar) görüyorsanız, animasyonunuzda gereksiz DOM güncellemeleri yapılıyor olabilir.

Hata ayıklama sürecinde, AnimatePresence bileşeninin exitBeforeEnter (yeni sürümlerde mode="wait") prop'unu doğru yapılandırdığınızdan emin olun. Eğer animasyonlar birbirine giriyorsa, büyük ihtimalle React Router'ın location nesnesi güncellenirken bileşen ağacı tam olarak senkronize olmuyordur.

Profesyonel İpucu: Animasyonlarınızın performansını test etmek için Lighthouse raporlarında "Total Blocking Time" değerini kontrol edin. Eğer bu değer 200ms üzerindeyse, animasyon sürelerini (duration) biraz kısaltmak veya karmaşıklığı azaltmak kullanıcı deneyimini iyileştirecektir.

Sonuç

React ile Framer Motion kullanarak sayfa geçiş animasyonları yapmak, uygulamanıza profesyonel ve modern bir hava katar. Bu rehberde öğrendiğiniz AnimatePresence kullanımı ve yeniden kullanılabilir bileşen mantığı, projelerinizde ölçeklenebilir animasyonlar oluşturmanıza olanak tanır. Bir sonraki adım olarak, Framer Motion'ın sunduğu useScroll hook'u ile sayfa kaydırma animasyonlarını keşfedebilir veya farklı sayfa geçişleri için özel animasyon varyantları oluşturmayı deneyebilirsiniz.

Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce kodunuzu kapsamlı testlerden geçirin ve güvenlik açıklarına karşı gerekli kontrolleri yapın.