Como criar um componente de animação fade-in reutilizável em reagir com o GSAP

Por

Se você nunca ouviu falar ou usou o GSAP, está perdendo. O GSAP é uma biblioteca de animação para componentes e elementos. A página inicial deles mostra muitas animações incríveis que você pode fazer com a ferramenta.

O GSAP tem muitas configurações e não existe uma maneira correta de obter um tipo de animação. Portanto, analisaremos uma maneira (opinativa) de criar uma animação ‘Fade In’ quando um componente for carregado.

Este artigo não entrará em detalhes sobre como usar o GSAP. A documentação deles é o recurso essencial se você deseja um guia detalhado para aprender a ferramenta.

O que vamos animar

Aqui está uma pequena descrição do que vamos animar:

É algo simples. Quando um componente é carregado (em qualquer lugar), ele diminui. Também adicionaremos direção para que o componente diminua da área para a posição normal.

Também tornaremos o componente de animação reutilizável para que possamos aplicá-lo a diferentes elementos.

Vamos começar!

Instalação GSAP

Primeiro, você deve ter um projeto de reação configurado. create-react-app está disponível para você, se você precisar configurar rapidamente um para este projeto.

Para instalar o GSAP, digite o seguinte comando no seu terminal (com o diretório atual sendo o diretório do projeto react):

npm install --save gsap

Criar um componente de animação utilizável

Configurando o componente

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

export default FadeInAnimation

Nossa animação ainda não está pronta, mas vamos entender com o que estamos começando.

  • wrapperElement: usado para especificar qual seria o componente. Tem um padrão de div. Isso é melhor do que criar um nó DOM extra para agrupar o componente que queremos animar.
  • useRef: gsap precisamos saber para o que acionar animações. Com isso, podemos nos referir ao nosso componente no DOM.
  • useEffect: sem isso, gsap acionará animações com uma referência nula (useRef(null)) Temos que garantir que o componente já esteja montado, daí esse gancho.
  • children: será o que é encontrado entre <FadeInAnimation> e </FadeInAnimation>. Pode ser texto ou até um grupo de elementos.
  • ...props: para estender a reutilização, isso é necessário para que os componentes possam aplicar outros acessórios, como className e style.
  • direction: para casos em que desejamos adicionar direção ao efeito de desvanecimento. O valor padrão é nulo.

Agora vamos para o GSAP.

Configurando a animação

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;

Vamos ver o que aconteceu aqui:

  • Inicializamos uma variável distance para 200. Isso é útil nos casos em que uma direção é aplicada. Você também pode adicionar isso aos objetos de entrada para que o componente que o utiliza possa decidir.
  • Nós temos nosso switch caso. Isso é para determinar a direção do fade-in, com o caso padrão para os casos em que a direção não é especificada.
  • Então gsap. Isso é exposto no GSAP para animar nosso componente. Há .to, .from, .fromTo e mais você pode encontrar nos documentos.
  • gsap.from no nosso caso, refere-se ao estado inicial do componente antes do final (definido na folha de estilo do componente). Alvejamos o elemento atual da ref, aplicamos uma duração de 1 segundo e aplicamos as opções de animação.
  • ...fadeDirection: espalhamos o objeto para que ele apareça lá como {x: 200} ou conforme especificado. x é para horizontal e y é para vertical.
  • Em seguida, uma opacidade inicial de 0 e um atraso, conforme especificado pelo componente.

E é isso. Vamos criar um componente que use essa incrível animação.

Como usar o nosso resuable fade in component

Vá para o componente que você deseja animar e faça algo semelhante ao seguinte:

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>
  );
}

Como visto acima, nosso FadeInAnimation componente pode aceitar um style suporte. Lembre-se que fizemos ...props.

Aqui está o resultado em CodeSandBox

Embrulhar

Isso é um envoltório. Este é um uso simples (opinativo) do GSAP para efeitos de desvanecimento.

Obviamente, você pode configurá-lo ainda mais, como criar um efeito de fade-in bounce, rotação de fade-in e outras coisas divertidas. Espero que este artigo tenha fornecido uma breve e concisa introdução de como o GSAP é incrível e como começar a fazer coisas incríveis na Web.

Nota lateral: é semelhante à configuração que estou usando em um novo pacote de animação que lançarei em breve. Vou compartilhar neste artigo quando for publicado:)