Sådan oprettes en genanvendelig Fade-in-animationskomponent, der reagerer med GSAP
Hvis du ikke har hørt om eller brugt GSAP, går du glip af det. GSAP er et animationsbibliotek til komponenter og elementer. Deres hjemmeside viser en masse fantastiske animationer, du kan lave med værktøjet.
GSAP har mange konfigurationer, og der er ingen rigtig måde at opnå en type animation på. Så vi ser på en måde (meningsfuld) til at skabe en 'Fade In' animation, når en komponent indlæses.
Denne artikel vil ikke gå i detaljer om, hvordan man bruger GSAP. Deres dokumentation er go-to-ressourcen, hvis du vil have en grundig guide til at lære værktøjet.
Hvad vi vil animere
Her er en lille beskrivelse af, hvad vi vil animere:
Det er noget simpelt. Når en komponent er indlæst (hvor som helst), falmer den ind. Vi tilføjer også retning, så komponenten falmer ind fra område til normal position.
Vi gør også animationskomponenten genanvendelig, så vi kan anvende den på forskellige elementer.
Lad os komme igang!
GSAP-installation
For det første skal du have oprettet et reaktionsprojekt. create-react-app er der for dig, hvis du hurtigt skal konfigurere en til dette projekt.
For at installere GSAP skal du indtaste følgende kommando i din terminal (hvor den aktuelle mappe er din react-projektmappe):
npm install --save gsap
Opret en anvendelig animationskomponent
Opsætning af komponenten
Lad os kalde vores componet FadeIn
:
import React, {useRef, useEffect} from 'react' const FadeInAnimation = ({children, wrapperElement = 'div', direction = null, ...props}) => { const Component = wrapperElement; const compRef = useRef(null) useEffect(() => { // animations }, [compRef]) return ( {children} ) } export default FadeInAnimation
Vores animation er ikke klar endnu, men lad os forstå, hvad vi starter med.
wrapperElement
: bruges til at specificere, hvad komponenten ville være. Det har en standard pådiv
. Dette er bedre end at oprette en ekstra DOM-knude til at pakke den komponent, vi vil animere.useRef
:gsap
vi har brug for dette for at vide, hvad vi skal udløse animationer til. Med dette kan vi henvise til vores komponent i DOM.useEffect
: uden dette,gsap
udløser animationer med en null-reference (useRef(null)
). Vi skal sikre, at komponenten allerede er monteret, derfor denne krog.children
: dette er hvad der findes mellemog
. Kan være tekst eller endda en gruppe af elementer.
...props
: for at udvide genanvendelighed er dette nødvendigt, så komponenterne kan anvende andre rekvisitter somclassName
ogstyle
.direction
: i tilfælde, hvor vi vil føje retning til fade-in-effekten. Standardværdien er nul.
Lad os nu gå over til GSAP.
Opsætning af animationen
import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; const FadeInAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 200; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay }); }, [compRef, fadeDirection, delay]); return ( {children} ); }; export default FadeInAnimation;
Lad os gå over, hvad der skete her:
- Vi initialiserede en variabel
distance
til at være 200. Dette er nyttigt i tilfælde, hvor en retning anvendes. Du kan også tilføje dette til inputrekvisitterne, så den komponent, der bruger det, kan bestemme. - Vi har vores
switch
sag. Dette er for at bestemme retningen af fade-in, med standardtilfælde i tilfælde, hvor retningen ikke er specificeret. - Så
gsap
. Dette udsættes fra GSAP for at animere vores komponent. Der er.to
,.from
,.fromTo
og mere kan du finde i docs. gsap.from
refererer i vores tilfælde til den oprindelige tilstand for komponenten før den endelige (angivet i komponentens stilark). Vi målretter mod det aktuelle element i ref, anvender en varighed på 1 sekund og anvender animationsindstillingerne....fadeDirection
: vi spreder objektet, så det vises der som{x: 200}
eller som angivet.x
er for vandret ogy
er for lodret.- Derefter en indledende opacitet på 0 og en forsinkelse som specificeret af komponenten.
Og det er det. Lad os lave en komponent, der bruger denne fantastiske animation.
Sådan bruges vores resuable fade in component
Gå over til den komponent, du vil animere, og gør noget, der ligner følgende:
import React from "react"; import FadeInAnimation from "./FadeInAnimation"; export default function App() { return ( Hello CodeSandbox Start editing to see some magic happen! Hello
); }
Som det ses ovenfor, kan vores FadeInAnimation
komponent acceptere en style
prop. Husk det gjorde vi ...props
.
Her er resultatet i CodeSandBox
Pak ind
Det er en wrap. Dette er en simpel (meningsfuld) brug af GSAP til fade-in effekter.
Selvfølgelig kan du konfigurere det yderligere, som at lave en fade-in-bounce-effekt, fade-in-rotation og andre sjove ting. Men jeg håber, at denne artikel har givet dig en kort og kortfattet introduktion til, hvor fantastisk GSAP er, og hvordan du kommer i gang med at gøre fantastiske ting på nettet.
Sidebemærkning: dette svarer til den opsætning, jeg bruger i en ny animationspakke, jeg lancerer snart. Jeg deler det i denne artikel, når den er offentliggjort :)