Matt Perry z Frameru a já se podíváme na animační knihovnu React Framer Motion.
Nejprve se podíváme na to, jak jednoduché je API. Vše velmi deklarativně ovládáte pomocí rekvizit na prvcích ve vašem JSX. Ovládání animace v této vrstvě je velmi intuitivní a propojené s uživatelským rozhraním a stavem smysluplným způsobem.
Každý příklad, na který se podíváme, je reálnější a zahrnuje více funkcí toho, čeho je Framer Motion schopen. Vývojáři React budou milovat syntaxi toho všeho a všichni ostatní budou milovat neuvěřitelně výkonné a hladké výsledky.
Nakonec se podíváme na samotný Framer, který interně používá tuto přesnou knihovnu k provádění všech animací, které Framer dělá. Framer vás zaujal? Stáhněte si Framer X.
Demo 1: Základní syntaxe
Demo 2: Varianty
Demo 3: AnimatePresence a layoutTransition
Bonus: podívejte se na funkci „posouvání zavřít“ ve vyskakovacím okně s obrázkem.