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: gsapvi 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, gsapudlø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 mellem og . 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 som classNameog style.
  • 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 distancetil 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 switchsag. 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, .fromToog mere kan du finde i docs.
  • gsap.fromrefererer 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. xer for vandret og yer 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 FadeInAnimationkomponent acceptere en styleprop. 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 :)