React İle Framer Motion Kullanarak Sayfa Geçiş Animasyonu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Uygulamaya başlamadan önce sisteminizde Node.js yüklü olduğundan emin olun. Projenizi oluştururken modern bir React yapısı (Vite veya Next.js 15+) kullanmanız önerilir. Framer Motion, React 18 ve üzeri sürümlerle tam uyumlu çalışmaktadır.

İlk adım olarak projenize gerekli paketleri kurmanız gerekmektedir. Terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm install framer-motion react-router-dom

Bu komut, animasyon motoru olan Framer Motion'ı ve sayfalar arası yönlendirmeyi sağlayan React Router kütüphanesini projenize dahil edecektir. Kurulum tamamlandıktan sonra, projenizin package.json dosyasında ilgili bağımlılıkların göründüğünden emin olun.

React Router ile Animasyon Yapısı Kurulumu

Sayfa geçişlerini yönetmek için AnimatePresence bileşenini kullanacağız. Bu bileşen, React'ten ayrılan (unmount olan) bileşenlerin animasyonlarını tamamlamasına izin verir. React Router'ın useLocation hook'u ile mevcut rotayı takip ederek her sayfa değişiminde animasyonu tetikleyeceğiz.

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

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

Burada mode="wait" parametresi, bir sayfanın animasyonu tamamen bitmeden diğerinin başlamamasını sağlar. key={location.pathname} kullanımı ise, rota değiştiğinde Framer Motion'ın yeni bir sayfa yüklendiğini anlamasını sağlar.

Sayfa Geçişi İçin Animasyon Bileşeni Oluşturma

Her sayfa için ayrı animasyon tanımlamak yerine, yeniden kullanılabilir bir PageTransition bileşeni oluşturmak en iyi pratiklerden biridir. Bu sayede kod tekrarını önlemiş olursunuz.

import { motion } from 'framer-motion';

const pageVariants = {
  initial: { opacity: 0, x: 50 },
  animate: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: -50 }
};

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

Bu bileşen, sayfaya giriş yaparken sağdan sola doğru bir kayma ve şeffaflık (opacity) değişimi ekler. transition nesnesi ile animasyonun süresini ve hızlanma eğrisini (easing) kontrol edebilirsiniz.

Sayfaları Animasyonla Sarmalama

Oluşturduğunuz PageTransition bileşenini sayfalarınızda kullanarak animasyonları aktif hale getirebilirsiniz. Her sayfanın ana kapsayıcısı bu bileşen olmalıdır.

const Home = () => (
  
    


Ana Sayfa
    
Hoş geldiniz!
  
);

const About = () => (
  
    


Hakkımızda
    
Biz kimiz?
  
);

Bu yapı sayesinde, sayfalar arası geçişlerde PageTransition içindeki motion.div tetiklenir ve tanımladığınız initial, animate, exit durumları arasında geçiş gerçekleşir.

Framer Motion Animasyon Yöntemleri Karşılaştırması

Framer Motion'da animasyon oluştururken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, projelerinizde hangi yöntemi seçmeniz gerektiğine dair bir rehber niteliğindedir.

Kritik Performans ve Güvenlik İpuçları

Uyarı: Animasyonlar sırasında yüksek işlemci gücü gerektiren hesaplamalardan kaçının. Karmaşık animasyonlar, özellikle mobil cihazlarda performans kaybına neden olabilir. Ayrıca, XSS saldırılarına karşı kullanıcıdan gelen verileri doğrudan animasyon değerlerinde kullanmamaya özen gösterin.

Performansı artırmak için layout prop'unu kullanabilir ve animasyonların GPU hızlandırmalı (transform ve opacity) özellikler üzerinde çalıştığından emin olmalısınız.

Sıkça Sorulan Sorular

Sayfa geçişlerinde neden animasyon çalışmıyor?

Genellikle AnimatePresence bileşenine key prop'unun doğru verilmemesinden kaynaklanır. location.pathname değerini key olarak atadığınızdan emin olun.

Animasyonlar çok yavaş görünüyor, nasıl hızlandırırım?

transition prop'u içerisindeki duration değerini düşürerek (örneğin 0.3) animasyonu hızlandırabilirsiniz.

Mobil cihazlarda animasyonlar takılıyor, ne yapmalıyım?

Animasyonlarda width veya height gibi özellikler yerine transform (scale, x, y) ve opacity kullanın. Bunlar GPU tarafından işlenir.

Framer Motion SEO'yu etkiler mi?

Hayır, Framer Motion istemci taraflı bir kütüphanedir. Arama motorları içeriğinizi okumaya devam eder, ancak animasyonların içerik görünürlüğünü engellemediğinden emin olun.

Next.js 15 ile kullanımı farklı mı?

Next.js'de 'use client' direktifini dosyanın en üstüne eklemeyi unutmayın, çünkü Framer Motion yalnızca istemci tarafında çalışır.

İleri Seviye: Animasyonlarda Erişilebilirlik (a11y) ve "Reduced Motion" Desteği

Animasyonlar kullanıcı deneyimini iyileştirse de, vestibüler bozuklukları olan veya hareket hassasiyeti bulunan kullanıcılar için rahatsız edici olabilir. Web standartları, kullanıcıların işletim sistemi düzeyinde "hareketi azalt" (reduce motion) tercihini belirlemelerine olanak tanır. Framer Motion, bu tercihi otomatik olarak algılayıp animasyonları devre dışı bırakmanıza yardımcı olacak araçlar sunar.

Aşağıdaki örnekte, kullanıcının sistem ayarlarını kontrol ederek animasyonları koşullu olarak nasıl yöneteceğinizi görebilirsiniz:

import { motion, useReducedMotion } from "framer-motion";

const AccessibleBox = () => {
  const shouldReduceMotion = useReducedMotion();

  const variants = {
    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -100 },
    visible: { opacity: 1, x: 0 }
  };

  return (
    
      İçerik
    
  );
};

Sayfa Geçişlerinde "Layout" ve "Shared Element" Animasyonları

Sayfa geçişlerini bir adım öteye taşıyan en güçlü özelliklerden biri layoutId kullanımıdır. Eğer bir sayfadan diğerine geçerken bir görselin veya başlığın "akarak" yer değiştirmesini istiyorsanız, Framer Motion'ın paylaşılan element animasyonlarını kullanmalısınız.

Bu teknik, özellikle e-ticaret sitelerinde ürün listesinden detay sayfasına geçişlerde kullanıcıya süreklilik algısı yaratır:

// Liste sayfası


// Detay sayfası

Dikkat Edilmesi Gerekenler:

• layoutId Çakışmaları: Aynı sayfada birden fazla aynı layoutId kullanmadığınızdan emin olun; aksi takdirde animasyon tetiklenmez.
• Performans: Karmaşık SVG veya çok sayıda DOM elemanında layoutId kullanmak tarayıcıyı yorabilir. Sadece anahtar görsel öğelerde tercih edin.
• Z-Index: Animasyon sırasında elementlerin birbirinin üzerine binmemesi için CSS katmanlarını (z-index) doğru yönetin.

Animasyon Performansını İzleme ve Hata Ayıklama

Geliştirme aşamasında animasyonların kare hızını (FPS) kontrol etmek, uygulamanın akıcılığı için kritiktir. Chrome Geliştirici Araçları'ndaki "Rendering" sekmesini kullanarak "Frame Rendering Stats" seçeneğini aktif edin.

Eğer animasyonlarınız beklediğiniz gibi çalışmıyorsa, Framer Motion'ın debug modunu veya console loglarını kullanarak bileşenin yaşam döngüsünü (mount/unmount) izleyebilirsiniz. AnimatePresence bileşenine onExitComplete callback'ini ekleyerek, bir sayfanın animasyonu bittikten sonra tetiklenmesini istediğiniz ek işlemleri (örneğin veri temizleme) güvenle gerçekleştirebilirsiniz.

Sonuç

React ile Framer Motion kullanarak sayfa geçiş animasyonları eklemek, uygulamanızın profesyonellik seviyesini bir üst noktaya taşır. Bu rehberde öğrendiğiniz AnimatePresence kullanımı, variants tanımlama ve PageTransition bileşeni oluşturma teknikleri, animasyon dünyasına giriş için sağlam bir temel oluşturur. Bir sonraki adım olarak, useScroll hook'unu kullanarak kaydırma tabanlı animasyonları (scroll-based animations) araştırmanızı öneririm.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, özellikle kullanıcı etkileşimli animasyonlarda erişilebilirlik (a11y) standartlarını göz önünde bulundurarak, hareket hassasiyeti olan kullanıcılar için animasyonları devre dışı bırakma seçeneği sunmayı unutmayın.