Dacă nu ați auzit sau nu ați folosit GSAP, pierdeți. GSAP este o bibliotecă de animație pentru componente și elemente. Pagina lor de pornire afișează o mulțime de animații minunate pe care le puteți face cu instrumentul.

GSAP are o mulțime de configurații și nu există o modalitate corectă de a realiza un singur tip de animație. Deci, vom analiza o modalitate (opinionată) de a crea o animație „Fade In” atunci când se încarcă o componentă.

Acest articol nu va intra în detalii despre modul de utilizare a GSAP. Documentația lor este resursa de acces, dacă doriți un ghid detaliat pentru a afla instrumentul.

Ce vom anima

Iată o mică descriere a ceea ce vom anima:

Este ceva simplu. Când o componentă este încărcată (oriunde), aceasta se estompează. Vom adăuga, de asemenea, direcția, astfel încât componenta să se estompeze din zonă în poziția normală.

De asemenea, vom face componenta de animație reutilizabilă, astfel încât să o putem aplica diferitelor elemente.

Să începem!

Instalare GSAP

În primul rând, trebuie să aveți configurat un proiect de reacție. creați-reacționați-aplicație este acolo pentru dvs. dacă trebuie să configurați rapid unul pentru acest proiect.

Pentru a instala GSAP, introduceți următoarea comandă în terminalul dvs. (directorul curent fiind directorul proiectului de reacție):

npm install --save gsap

Creați o componentă de animație utilizabilă

Configurarea componentei

Să numim componenta noastră, 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 (
    <Component ref={compRef} {...props}>
      {children}
    </Component>
  )
}

export default FadeInAnimation

Animația noastră nu este încă pregătită, dar să înțelegem cu ce începem.

  • wrapperElement: folosit pentru a specifica care ar fi componenta. Are o valoare implicită a div. Acest lucru este mai bun decât crearea unui nod DOM suplimentar pentru a înfășura componenta pe care dorim să o animăm.
  • useRef: gsap avem nevoie de asta pentru a ști la ce să declanșăm animații. Cu aceasta, ne putem referi la componenta noastră din DOM.
  • useEffect: fără asta, gsap va declanșa animații cu o referință nulă (useRef(null)). Trebuie să ne asigurăm că componenta este deja montată, de unde acest cârlig.
  • children: acesta va fi ceea ce se găsește între <FadeInAnimation> și </FadeInAnimation>. Ar putea fi text sau chiar un grup de elemente.
  • ...props: pentru a extinde reutilizarea, acest lucru este necesar, astfel încât componentele să poată aplica alte elemente de recuzită, cum ar fi className și style.
  • direction: pentru cazurile în care dorim să adăugăm direcție efectului de fade-in. Valoarea implicită este nulă.

Acum să mergem la GSAP.

Configurarea animației

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 (
    <Component ref={compRef} {...props}>
      {children}
    </Component>
  );
};

export default FadeInAnimation;

Să trecem peste ce s-a întâmplat aici:

  • Am inițializat o variabilă distance să fie 200. Acest lucru este util pentru cazurile în care se aplică o direcție. Puteți adăuga acest lucru la elementele de intrare, astfel încât componenta care îl utilizează să poată decide.
  • Noi avem switch caz. Aceasta este pentru a determina direcția de fade-in, cu cazul implicit pentru cazurile în care direcția nu este specificată.
  • Atunci gsap. Acest lucru este expus de la GSAP pentru a anima componenta noastră. Există .to, .from, .fromTo și mai multe puteți găsi în documente.
  • gsap.from în cazul nostru se referă la starea inițială a componentei înainte de cea finală (setată în foaia de stil a componentei). Direcționăm elementul curent al referinței, aplicăm o durată de 1 secundă și aplicăm opțiunile de animație.
  • ...fadeDirection: răspândim obiectul astfel încât să apară acolo ca {x: 200} sau după cum se specifică. x este pentru orizontală și y este pentru vertical.
  • Apoi, o opacitate inițială de 0 și o întârziere, așa cum este specificat de componentă.

Si asta e. Să facem o componentă care utilizează această animație minunată.

Cum se folosește componenta noastră fade resuable

Mergeți la componenta pe care doriți să o animați și faceți ceva similar cu următoarele:

import React from "react";
import FadeInAnimation from "./FadeInAnimation";

export default function App() {
  return (
    <div>
      <FadeInAnimation wrapperElement="h1" direction="down">
        Hello CodeSandbox
      </FadeInAnimation>
      <FadeInAnimation wrapperElement="h2" direction="right" delay={2}>
        Start editing to see some magic happen!
      </FadeInAnimation>
      <FadeInAnimation
        style={{
          width: 200,
          color: "white",
          height: 200,
          backgroundColor: "purple"
        }}
        direction='up'
      >
        <p>Hello</p>
      </FadeInAnimation>
    </div>
  );
}

După cum sa văzut mai sus, FadeInAnimation componenta poate accepta o style recuzită. Amintiți-vă că am făcut-o ...props.

Iată rezultatul CodeSandBox

Învelire

Asta e un pachet. Aceasta este o utilizare simplă (opinionată) a GSAP pentru efecte de fade-in.

Desigur, îl puteți configura în continuare, cum ar fi efectuarea unui efect de respingere fade-in, rotire fade-in și alte lucruri distractive. Dar sper că acest articol v-a oferit o scurtă și concisă introducere a cât de minunat este GSAP și cum să începeți să faceți lucruri uimitoare pe web.

Notă laterală: aceasta este similară cu configurarea pe care o folosesc într-un nou pachet de animație pe care îl lansez în curând. Îl voi împărtăși în acest articol când va fi publicat:)