Matt Perry Frameristä ja minä katsomme React-animaatiokirjastoa Framer Motion.
Ensin tarkastelemme kuinka yksinkertainen sovellusliittymä on. Hallitset kaikkea erittäin vakuuttavasti JSX: n elementtien rekvisiitalla. Animaation hallinta tällä kerroksella on hyvin intuitiivista ja liitetty käyttöliittymään ja tilaan mielekkäällä tavalla.
Jokainen esimerkki, jota katsomme, on todellisempi ja sisältää enemmän ominaisuuksia, mihin Framer Motion pystyy. React-kehittäjät rakastavat kaiken syntaksia, ja kaikki muut rakastavat uskomattoman suorituskykyisiä ja sujuvia tuloksia.
Katsomme lopuksi itse Framerin, joka käyttää tätä tarkkaa kirjastoa sisäisesti tekemään kaikki Framerin tekemät animaatiot. Kiinnostanut Framer? Lataa Framer X.
Demo 1: Perussyntaksi
Demo 2: Vaihtoehdot
Esittely 3: AnimatePresence ja layoutTransition
Bonus: tutustu kuvan vieritystoimintoon vierittämällä.