Framer Motion nedir?
- React kursu
- İleri seviye
- Ders 37/56
- 4 dk
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.
Başlangıç kodu
import { motion } from 'framer-motion';
// FadeIn bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Framer Motion neyi kullanır?
- CSS keyframes
- motion bileşenleri Doğru cevap
- Web Animations API
- Canvas
Açıklama: Motion bileşenleri.
2 motion bileşeni
<____ initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Merhaba</motion.div><motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Merhaba</motion.div>Açıklama: motion.div animasyonlu div'tir.
3 Framer Motion nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
initial |
Başlangıç durumu |
animate |
Hedef durum |
transition |
Süre/ara |
motion.div |
Animasyonlu div |