Motion
Production-Ready Animasyonlar
React için en güçlü animasyon kütüphanesi. Gestures, layout animations ve exit animations ile canlı, engaging UI'lar.
Özellikler
Motion'ın sunduğu güçlü özellikler.
Layout Animations
CSS layout değişikliklerini otomatik anime edin. Reorder, resize ve position değişiklikleri smooth geçişlerle.
Gestures
Tap, drag, hover ve pan gesture'ları. Touch ve mouse için otomatik handling.
Exit Animations
Component'lar DOM'dan çıkarken animasyon. AnimatePresence ile unmount kontrol.
Variants
Animasyon state'lerini tanımlayın ve orchestration yapın. Parent-child senkronizasyonu.
Spring Physics
Doğal hissettiren spring animasyonlar. Stiffness, damping ve mass kontrolleri.
Scroll Animations
Scroll-linked animasyonlar. Progress tracking, reveal effects ve parallax.
Canlı Demolar
Motion ile neler yapabileceğinizi deneyin.
Gesture Animation
Hover ve tap ile etkileşimli buton.
Layout Animation
Seçim yaparak layout değişikliğini izleyin.
Basit API
Declarative syntax ile animasyonları kolayca tanımlayın. Karmaşık animasyonlar bile birkaç satır kod.
- motion.div ile herhangi bir element'i anime edin
- initial, animate, exit ile state tanımlayın
- whileHover, whileTap ile gesture animasyonlar
import { motion, AnimatePresence } from "motion/react"
// Basit animasyon
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Merhaba Dünya
</motion.div>
// Gesture animasyonlar
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click me
</motion.button>
// Exit animasyonlar
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
Görünür içerik
</motion.div>
)}
</AnimatePresence>
// Layout animasyonlar
<motion.div layout>
Bu element hareket edecek
</motion.div>Best Practices
Animasyonlarda dikkat ettiğimiz prensipler.
Performans
- GPU-accelerated transforms kullanın (translate, scale, rotate)
- will-change ile browser'ı optimize edin
- Gereksiz re-render'lardan kaçının
Erişilebilirlik
- prefers-reduced-motion media query'sini kontrol edin
- Animasyonları kapatma seçeneği sunun
- Çok hızlı veya parlak animasyonlardan kaçının
UX
- Animasyonlar amaca hizmet etmeli
- Tutarlı timing ve easing kullanın
- Subtle > flashy
Kullanıcıların sevdiği deneyimler tasarlayalım
Projenizi konuşmak için ücretsiz bir danışmanlık görüşmesi ayarlayalım. Kullanıcı odaklı yaklaşımımızı keşfedin.