Logo de Dallonses

Framer Motion

Què és Framer Motion?

Framer Motion és una llibreria d'animació per a React. Et permet descriure com es mouen, s'esvaeixen i responen a la interacció els elements mitjançant una API declarativa, així que escrius com hauria de veure's una animació en comptes d'avançar manualment fotograma a fotograma. Un sol motion.div amb una prop animate reemplaça una pila de keyframes CSS i codi de temporització en JavaScript.

Va sortir de Framer, l'eina de disseny, i es va alliberar com a llibreria de React independent. El 2024 va passar a anomenar-se Motion i es va ampliar per donar suport a JavaScript pur i altres frameworks, tot i que la majoria encara l'anomena Framer Motion. Resol bé les parts difícils del moviment: física de molles que se sent natural, gestos com arrossegar i hover, animacions de layout que transicionen elements amb suavitat quan el DOM es reorganitza, i seqüències orquestrades a través de molts components. Un equip de producte que afegeix una transició satisfactòria quan una targeta s'expandeix en un panell complet recorreria normalment a la seva animació de layout.

Competeix amb React Spring i amb CSS fet a mà. CSS és més lleuger quan només necessites un hover o un esvaïment simple. Framer Motion guanya el seu pes un cop les interaccions es tornen coordinades, interrompibles o lligades a l'estat del component.

Framer Motion a Dallonses

Fem servir Framer Motion quan el moviment és part de com comunica una interfície, no decoració empolvorada al final. Una bona animació diu a l'usuari d'on va venir una cosa i on va anar. El portem a la feina de desenvolupament web i disseny alhora, així els enginyers que construeixen la transició i els dissenyadors que li donen forma llegeixen de la mateixa intenció.

El mantenim contingut. El moviment que es baralla amb l'usuari o frena un flux és pitjor que cap, així que el provem en dispositius reals i tallem qualsevol cosa que arrossegui. Quan un partner vol una interfície que se senti viva sense sentir-se recarregada, aquesta sol ser l'eina a la qual recorrem.

Vols moviment que guiï en comptes de distreure? Anem a dissenyar-lo junts.

Parlem d'UI

Serveis relacionats


Preparat per a traballar junts?

Reserva una reunió
Aymón sostenint una revista Tools davant de la seva cara
Ari treballant en un portàtil a l'aire lliure envoltada de plantes
Vista superior d'un escriptori de fusta amb teclat, ratolí i auriculars
Il·lustració dibuixada a mà d'una mà chasquejant els dits
Nico recolzat contra un dispensador d'aigua al costat d'un extintor
Primer pla d'un ordinador obert amb placa de circuit i components sobre un escriptori de fusta
Bernat i Andreu col·laborant en un escriptori amb monitors i un portàtil
Il·lustració dibuixada a mà d'una mà oberta saludant
Aymón sostenint una revista Tools davant de la seva cara
Ari treballant en un portàtil a l'aire lliure envoltada de plantes
Vista superior d'un escriptori de fusta amb teclat, ratolí i auriculars
Il·lustració dibuixada a mà d'una mà chasquejant els dits
Nico recolzat contra un dispensador d'aigua al costat d'un extintor
Primer pla d'un ordinador obert amb placa de circuit i components sobre un escriptori de fusta
Bernat i Andreu col·laborant en un escriptori amb monitors i un portàtil
Il·lustració dibuixada a mà d'una mà oberta saludant