Matt Perry fra Framer og jeg kigger på React animationsbiblioteket Framer Motion.
Først ser vi på, hvor enkelt API'et er. Du styrer alt meget erklærende gennem rekvisitter på elementer i din JSX. Kontrol af animation på dette lag er meget intuitiv og forbundet til brugergrænsefladen og tilstand på en meningsfuld måde.
Hvert eksempel, vi ser på, er mere virkelige og involverer flere funktioner i, hvad Framer Motion er i stand til. React-udviklere vil elske syntaksen for det hele, og alle andre vil elske de utroligt performante og glatte resultater.
Vi afslutter med at se på Framer selv, som bruger dette nøjagtige bibliotek internt til at gøre alle de animations ting, Framer gør. Nysgerrig af Framer? Download Framer X.
Demo 1: Grundlæggende syntaks
Demo 2: Varianter
Demo 3: AnimatePresence og layoutTransition
Bonus: tjek funktionen "rul for at afvise" på pop op-billedet.