Framer'dan Matt Perry ve ben React animasyon kitaplığı Framer Motion'a bir göz atıyoruz.
İlk olarak, API'nin ne kadar basit olduğuna bir göz atalım. JSX'inizdeki öğeler üzerindeki props aracılığıyla her şeyi bildirimsel olarak kontrol edersiniz. Bu katmanda animasyonu kontrol etmek çok sezgiseldir ve kullanıcı arayüzüne ve duruma anlamlı bir şekilde bağlıdır.
Baktığımız her örnek daha gerçek dünyadır ve Framer Motion'ın yapabileceklerine dair daha fazla özellik içerir. React geliştiricileri, hepsinin sözdizimini sevecek ve diğer herkes inanılmaz derecede performanslı ve pürüzsüz sonuçları sevecek.
Framer'ın yaptığı tüm animasyon işlerini yapmak için bu kütüphaneyi dahili olarak kullanan Framer'ın kendisine bakmayı sonlandırıyoruz. Framer'ın ilgisini mi çekti? Framer X'i indirin.
Demo 1: Temel Sözdizimi
Demo 2: Çeşitler
Demo 3: AnimatePresence ve layoutTransition
Bonus: görüntü açılır penceresindeki "reddetmek için kaydırma" işlevine bakın.