Matt Perry z Frameru a ja sa pozrieme do knižnice animácií React Framer Motion.
Najprv sa pozrieme na to, aké jednoduché je API. Všetko ovládate veľmi deklaratívne pomocou rekvizít na prvkoch vo vašom JSX. Ovládanie animácie na tejto vrstve je veľmi intuitívne a prepojené s používateľským rozhraním a stavom zmysluplným spôsobom.
Každý príklad, na ktorý sa pozrieme, je realistickejší a zahŕňa viac funkcií toho, čoho je Framer Motion schopný. Vývojárom Reactu sa bude páčiť syntax všetkého a všetkým ostatným sa budú páčiť neuveriteľne výkonné a plynulé výsledky.
Nakoniec sa pozrieme na samotný Framer, ktorý interne používa túto presnú knižnicu na vykonávanie všetkých animácií, ktoré Framer robí. Zaujal vás Framer? Stiahnite si Framer X.
Demo 1: Základná syntax
Demo 2: Varianty
Ukážka 3: AnimatePresence a layoutTransition
Bonus: v rozbaľovacej ponuke obrázka si pozrite funkčnosť posúvania k odmietnutiu.