Matt Perry z Framer i ja przeglądamy bibliotekę animacji React Framer Motion.
Najpierw przyjrzyjmy się, jak proste jest API. Kontrolujesz wszystko bardzo deklaratywnie poprzez właściwości elementów w twoim JSX. Sterowanie animacją na tej warstwie jest bardzo intuicyjne i połączone z interfejsem użytkownika i stanem w znaczący sposób.
Każdy przykład, na który patrzymy, jest bardziej realistyczny i zawiera więcej funkcji, do których jest zdolny Framer Motion. Programiści React pokochają składnię tego wszystkiego, a wszyscy inni pokochają niesamowicie wydajne i płynne wyniki.
Kończymy przyglądając się samemu Framerowi, który używa tej właśnie biblioteki wewnętrznie do wykonywania wszystkich animacji, które robi Framer. Zaintrygowany Framer? Pobierz Framer X.
Demo 1: podstawowa składnia
Demo 2: Warianty
Demo 3: AnimatePresence i layoutTransition
Bonus: sprawdź funkcję „przewiń, aby odrzucić” w wyskakującym okienku obrazu.