Matt Perry di Framer e io diamo un'occhiata alla libreria di animazioni React Framer Motion.
Innanzitutto, diamo un'occhiata a quanto sia semplice l'API. Controlli tutto in modo molto dichiarativo attraverso oggetti di scena sugli elementi nel tuo JSX. Il controllo dell'animazione a questo livello è molto intuitivo e connesso all'interfaccia utente e allo stato in modo significativo.
Ogni esempio che guardiamo è più reale e coinvolge più funzionalità di ciò di cui è capace Framer Motion. Gli sviluppatori di React adoreranno la sintassi di tutto ciò e tutti gli altri apprezzeranno i risultati incredibilmente performanti e fluidi.
Finiamo guardando Framer stesso, che usa questa esatta libreria internamente per fare tutte le cose di animazione che Framer fa. Incuriosito da Framer? Scarica Framer X.
Demo 1: sintassi di base
Demo 2: varianti
Demo 3: AnimatePresence e layoutTransition
Bonus: controlla la funzionalità "scorri per ignorare" nel popup dell'immagine.