Matt Perry dari Framer dan saya melihat perpustakaan animasi React Framer Motion.
Pertama, kita melihat betapa sederhananya API itu. Anda mengontrol semuanya dengan sangat deklaratif melalui props pada elemen di JSX Anda. Mengontrol animasi pada lapisan ini sangat intuitif dan terhubung ke UI dan menyatakan dengan cara yang berarti.
Setiap contoh yang kami lihat lebih nyata dan melibatkan lebih banyak fitur dari apa yang mampu dilakukan Framer Motion. Pengembang React akan menyukai sintaks dari semuanya, dan semua orang akan menyukai hasil yang sangat bagus dan mulus.
Kami akhirnya melihat Framer itu sendiri, yang menggunakan perpustakaan persis ini secara internal untuk melakukan semua hal animasi yang dilakukan Framer. Penasaran dengan Framer? Unduh Framer X.
Demo 1: Sintaks Dasar
Demo 2: Varian
Demo 3: AnimatePresence dan layoutTransition
Bonus: periksa fungsionalitas "gulir untuk menutup" pada popup gambar.