Matt Perry från Framer och jag tittar på React animationsbiblioteket Framer Motion.
Först tittar vi på hur enkelt API är. Du styr allt mycket deklarativt genom rekvisita på element i din JSX. Att styra animering i detta lager är mycket intuitivt och kopplat till användargränssnittet och tillstånd på ett meningsfullt sätt.
Varje exempel vi tittar på är mer verklig och involverar fler funktioner i vad Framer Motion kan. React-utvecklare kommer att älska syntaxen av allt, och alla andra kommer att älska de otroligt prestanda och smidiga resultaten.
Vi slutar titta på Framer själv, som använder det exakta biblioteket internt för att göra alla de animationssaker som Framer gör. Fascinerad av Framer? Hämta Framer X.
Demo 1: Grundläggande syntax
Demo 2: Varianter
Demo 3: AnimatePresence och layoutTransition
Bonus: kolla in "bläddra för att avfärda" -funktionen i popup-fönstret.