Framer Motion, React için en güçlü animasyon kütüphanelerinden biri. Kullanıcı deneyimini zenginleştiren profesyonel animasyonlar oluşturmak için bilmeniz gereken her şeyi bu rehberde bulabilirsiniz.
Temel Animasyonlar
Framer Motion'da animasyonlar motion bileşenleri ile oluşturulur. Basit bir fade-in efekti bile uygulamanıza profesyonel bir hava katar:
- initial: Bileşenin başlangıç durumu
- animate: Hedef animasyon durumu
- transition: Animasyonun süresi, easing ve spring fizik ayarları
Scroll-Triggered Animasyonlar
Kullanıcı sayfayı kaydırdıkça tetiklenen animasyonlar, modern web sitelerinin vazgeçilmezi:
- useScroll: Scroll pozisyonunu takip eder
- useTransform: Scroll değerini başka bir değere dönüştürür
- whileInView: Bileşen viewport'a girdiğinde tetiklenir
Spring Physics
Doğal hissettiren animasyonlar için spring fizik modeli kullanın:
- stiffness: Yayın sertliği
- damping: Sönümleme
- mass: Kütle
Framer Motion'ı projelerinizde etkin kullanarak, kullanıcılarınıza unutulmaz bir deneyim sunabilirsiniz.