Slik legger du til animasjoner i React-appene dine med Framer Motion

Animasjon er en avgjørende del av nesten alle moderne nettapplikasjoner. Det er også en av de vanskeligste delene å få riktig.

Framer Motion er et bibliotek bygget for React som gjør det enkelt å animere komponenter.

Hvordan Framer Motion fungerer

Framer Motion bruker bevegelseskomponenten for animasjoner. Hvert HTML/SVG-element har en tilsvarende bevegelseskomponent som har rekvisitter for bevegelser og animasjoner. For eksempel ser en vanlig HTML-div ut slik:

<div>div>

Mens Framer Motion-ekvivalenten ser slik ut:

<motion.div>motion.div>

Bevegelseskomponenter støtter en animere prop som utløser animasjoner når verdiene endres. For komplekse animasjoner, bruk bruk Animate krok med en scoped ref.

Animasjon i Framer Motion

Før du bruker Framer Motion i prosjektet ditt, må du ha Node.js kjøretid og Garnpakkebehandleren installert på datamaskinen din og forstå hva React er og hvordan du bruker det.

Åpne terminalen og kjør:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
garn
garn dev

Når du åpner lokal vert: 5173 i nettleseren din vil du se dette:

Du kan nå lage din første enkle animasjon, en knapp som vokser ved å sveve og krymper når markøren går.

Åpne src/App.jsx fil i et koderedigeringsprogram. Denne filen inneholder en funksjonell komponent som returnerer et React-fragment. Importer Knapp komponent, deretter gjengi den, passerer i en tekst rekvisitt:

Animert knapp</h4>
Beveg musen over knappen for å se effekten</div>
"Hover meg"/>
</section>

Deretter redigerer du Button.jsx fil og importer bevegelse nytte fra framer-bevegelse:

import { bevegelse } fra"framer-motion"

Bytt nå den vanlige knapp element med bevegelse.[element] komponent. I dette tilfellet, bruk bevegelsesknapp komponent.

Legg deretter til en mens du holder musepekeren bevegelsesstøtte og sende et objekt med verdier som Framer Motion skal animere til når en bruker holder musepekeren over knappen.

skala: 1.1 }}>
{tekst}
</motion.button>

Knappen vil nå animeres når du flytter musepekeren over den eller ut av den:

Du lurer kanskje på hvorfor denne demoen ikke brukes CSS-animasjoner i stedet. Framer Motion har fordeler fremfor CSS fordi den integreres med React-tilstand og generelt resulterer i renere kode.

Deretter kan du prøve noe mer komplekst: å animere en modal. I Backdrop.jsx, importer bevegelsesverktøyet og lag en funksjonell komponent med ved trykk og barn Rekvisitter. Returner a motion.div komponent med klasse "bakgrunn" og ved trykk lytter i JSX.

eksportmisligholdefunksjonBakteppe() {
komme tilbake (<>

 </motion.div>
 </>)
}

Legg deretter til tre rekvisitter, nemlig: første, animere, og exit. Disse rekvisittene representerer henholdsvis den opprinnelige tilstanden til komponenten, tilstanden komponenten skal animere til og tilstanden komponenten skal være i etter animasjon.

Legg til ved trykk og barn rekvisitter til motion.div og sett overgangsvarigheten til 0,34 sekunder:

eksportmisligholdefunksjonBakteppe ({onClick, barn}){
komme tilbake (<>
 onClick={onClick}
 klassenavn="bakteppe"
 initial={{ opasitet: 0, bakteppefilter:"uskarphet (0px)" }}
 animere={{ opasitet: 1, bakteppefilter:"uskarphet (3,4px)" }}
 exit={{ opasitet: 0, bakteppefilter:"uskarphet (0px)"}}
 overgang={{
 varighet: 0.34,
 }}
 >
 {barn}
 </motion.div>
 </>)
}

De Bakteppe komponenten er en innpakning for Modal komponent. Ved å klikke på bakgrunnen avvises modalen. I Modal.jsx, importere bevegelse og Bakteppe-komponenten. Standard funksjonskomponent godtar rekvisitter: closeModal og tekst. Lag en variantvariabel som et objekt.

konst varianter = {
 initial: {
 y: "-200%",
 opasitet: 1,
 },
 synlig: {
 y: "50%",
 overgang: {
 varighet: 0.1,
 type: "vår",
 demping: 32,
 stivhet: 500
 }
 },
 exit: {
 y: "200%",
 }
 }

Returner en motion.div-komponent pakket inn av en Backdrop-komponent med en "varianter"-rekvisitt som peker på variantobjektet. Varianter er et sett med forhåndsdefinerte animasjonstilstander som komponenten kan være i.

 onClick={(e) => e.stopPropagation()}
 klassenavn="modal"
 varianter={varianter}
 initial='første'
 animere='synlig'
 exit='exit'
 >
 {tekst}
 </motion.div>
</Backdrop>

Deretter må du legge til funksjonaliteten for å vise modalen når en bruker klikker på knappen. Åpne App.jsx fil og importer useState Reager krok og den Modal komponent.

import { useState } fra"reagere";
import Modal fra"./komponenter/Modal";

Deretter oppretter du en modal Åpen tilstand med standardverdien satt til falsk.

konst [modalOpen, setModalOpen] = useState(falsk);

Definer deretter en funksjon closeModal som setter modal Åpen til falsk.

funksjoncloseModal() {
 settModalOpen(falsk)
}

Øverst i React-fragmentet, gjengi betinget en Modal komponent og bestå den aktuelle tekst prop med closeModal prop.

{modalOpen && <Modaltekst="Dette er en modal animert med Framer Motion"}

Så, i den andre seksjon element, gjengi en knapp element med en onClick hendelsesbehandler som setter modalOpen til false.

 settModalOpen(ekte)}>Vis Modal</button>

Du vil kanskje legge merke til at React demonterer Modal-komponenten fra DOM uten en utgangsanimasjon. For å fikse det trenger du en Animer tilstedeværelse komponent. Importer AnimatePresence fra framer-bevegelse.

import {AnimatePresence} fra'framer-motion';

Pakk nå inn Modal-komponenten i AnimatePresence-komponenten og still inn første prop til falsk og den modus å vente".

falsk}-modus="vente">
 {modalOpen && <Modaltekst="Dette er en modal animert med Framer Motion"closeModal={closeModal} />}
</AnimatePresence>

AnimatePresence-komponenten lar utgangsanimasjoner fullføres før React demonterer den fra DOM.

Framer Motion kan animere komponenter ved å rulle ved å bruke mens InView rekvisitt. Åpne ScrollElement.jsx, og importer bevegelse nytte. Endring div til motion.div med klassen "scroll-element".

 initial={{ opasitet: 0, skala: 0, rotere: 14 }}
 whileInView={{ opasitet: 1, skala: 1, rotere: 0 }}
 overgang={{ varighet: .8 }}
 viewport={{ en gang: ekte }}
 klassenavn='scroll-element'
>
 Rullelement
</motion.div>

De viewport prop peker på et objekt som setter seg en gang til ekte. Neste, i App.jsx fil, importer ScrollElement komponent og definer en variabel scrollElementCount som har en heltallsverdi.

la scrollElementCount=14;

I den siste seksjon element, opprette en matrise med en bestemt lengde definert av scrollElementCount som kartlegger hvert element i matrisen og genererer en komponent med en unik nøkkel basert på indeksen Jeg.

{[...Array (scrollElementCount)].map((x, jeg) =><ScrollElementnøkkel={Jeg} />)}

Nå, tilbake til nettleseren, skal elementer animeres når du ruller dem til syne.

Alternativer til Framer Motion

Framer Motion er ikke det eneste animasjonsbiblioteket på markedet. Hvis du ikke liker måten Framer Motion gjør ting på, kan du prøve andre biblioteker som Reager våren.

Du kan også bruke CSS-animasjoner, som alle moderne nettlesere støtter naturlig, men teknikkene som er involvert kan være vanskelige å lære og sette opp.

Forbedre brukeropplevelsen med animasjoner

Hver bruker forventer en smøraktig og jevn opplevelse når de bruker en nettapplikasjon. Et nettsted eller en applikasjon uten animasjoner føles statisk og ikke reagerer. Animasjoner forbedrer brukeropplevelsen fordi du kan bruke dem til å kommunisere tilbakemeldinger til brukeren når de utfører en bestemt handling.