Framer Motion nedir?

Framer Motion ile animasyon yazmanın temelini öğrenirsin.

Framer Motion nedir?

Framer Motion, React için popüler bir animasyon kütüphanesidir. motion bileşenleri ile JSX'e animasyon eklersin; CSS yazmadan akıcı geçişler elde edersin.

motion.div gibi bileşenler initial, animate ve transition prop'ları alır. Bu sayede başlangıç, bitiş ve süre tek yerde tanımlanır.

Framer Motion, GPU hızlandırmalı animasyonlar kullanır; bu yüzden performanslı çalışır. Ayrıca varyantlar ile bileşen durumlarını tanımlayabilirsin.

motion bileşeni

motion.div, normal bir <div> gibidir ama animasyon prop'ları alır. initial={{ opacity: 0 }} başlangıçta gizli, animate={{ opacity: 1 }} görünür yapar.

transition={{ duration: 0.3 }} animasyon süresini 300ms yapar. Bu üç prop birlikte basit bir görünürleşme animasyonu verir.

Her HTML etiketi için bir motion versiyonu vardır: motion.span, motion.button, motion.ul gibi.

Uygulama Görünürleşme animasyonu

Aşağıdaki iskeleti tamamla. FadeIn bileşeni yaz. <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>Merhaba</motion.div> döndür. motion'u 'framer-motion''dan içe aktar. export default ekle.

Örnek çözümü göster

import { motion } from 'framer-motion';

function FadeIn() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Merhaba
    </motion.div>
  );
}

export default FadeIn;

Kendini test et

Framer Motion neyi kullanır?
- CSS keyframes
- motion bileşenleri
- Web Animations API
- Canvas
Cevabı göster

motion bileşenleri — Motion bileşenleri.

motion bileşeni

<____ initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Merhaba</motion.div>

Cevabı göster

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Merhaba</motion.div>

Framer Motion nedir: kavramları eşleştir

initial

Başlangıç durumu
animate

Hedef durum
transition

Süre/ara
motion.div

Animasyonlu div

Sıradaki ders: motion bileşeni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler