React'te Framer Motion ile İlk Animasyonunuz

React projelerinde animasyon eklemek genelde göründüğünden daha karmaşık hâle gelir — state yönetimi, CSS class'ları, zamanlama... Framer Motion bu karmaşıklığın çoğunu ortadan kaldırıyor.

Canlı Yaylanma (Spring) Fiziği

Aşağıdaki interaktif stüdyoda Framer Motion'ın type: "spring" fizik motorunu canlı olarak deneyebilir, sertlik (stiffness) ve sönümleme (damping) değerleriyle oynayabilirsiniz:

İnteraktif Yay Fiziği Stüdyosu

Değerleri değiştirin ve yaylanmayı canlı izleyin

Sürükle& Bırak

Hazır Şablonlar:

Stiffness (Sertlik)300

Damping (Sönümleme)15

Mass (Kütle)1

transition: {
  type: "spring",
  stiffness: 300,
  damping: 15,
  mass: 1
}

Temel kurulum

BASH

npm install framer-motion

İlk animasyonunuz

Normal bir div yerine motion.div kullanmak, ona initial, animate ve transition gibi özellikler kazandırır:

TSX

import { motion } from "framer-motion";

function WelcomeCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
    >
      Merhaba!
    </motion.div>
  );
}

Bu kod, bileşen ekrana geldiğinde onu 20px aşağıdan, saydam bir şekilde başlatıp asıl konumuna yumuşakça getiriyor.

Hover ve tıklama durumları

whileHover ve whileTap, ayrı bir state tanımlamadan etkileşim animasyonu eklemenizi sağlar:

TSX

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Gönder
</motion.button>

Giriş/çıkış animasyonları: AnimatePresence

Bir öğe DOM'dan kaldırılırken de animasyon oynatmak isterseniz (örneğin bir modal kapanırken), AnimatePresence devreye girer:

TSX

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

function Modal({ isOpen }: { isOpen: boolean }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          İçerik
        </motion.div>
      )}
    </AnimatePresence>
  );
}

AnimatePresence, öğe kaldırılmadan önce exit animasyonunun bitmesini bekler — bu sayede modal aniden kaybolmak yerine yumuşakça kapanır.

Küçük bir tavsiye

Her yere animasyon eklemek cazip gelebilir, ama en iyi animasyonlar genelde fark edilmeyenlerdir. Amaç göz kamaştırmak değil, arayüzün mantıklı ve akıcı hissettirmesini sağlamaktır.