Como criar animações de entrada e saída para um componente React usando Framer Motion

A biblioteca Framer Motion traz uma série de funcionalidades de animação para seus aplicativos React.

Animar um componente React conforme ele entra ou sai da tela pode ser um desafio. Isso ocorre porque, ao ocultar um componente, o React o remove do DOM, o que o torna indisponível para animação. Quando você mostra o componente novamente, o React o adiciona novamente ao DOM, o que pode resultar em uma aparência abrupta sem animação.

Você pode resolver esse problema com uma biblioteca de animação como o Framer Motion.

O que é movimento Framer?

Framer Motion é uma biblioteca de animação pronta para produção para React. Ele fornece uma variedade de componentes, ganchos, quadros-chave e funções de atenuação personalizadas para criar e controlar animações.

Uma vantagem do Framer Motion é que ele facilita a criação de animações suaves e fluidas sem a necessidade de escrever muito código JavaScript ou fazer cálculos para cada transição.

Ele também possui um sistema de eventos, que você pode usar para acionar animações com base na entrada do usuário, como cliques em botões e gestos, criando interfaces interativas e dinâmicas que parecem responsivas.

Para demonstrar como usar o Framer Motion no React, você animará um componente que entra e sai da tela quando você clica em um botão.

Criando um projeto React

Para criar um projeto React, você precisará instalar o Node.js e o npm (Node Package Manager) em sua máquina, caso ainda não o tenha feito.

Depois de instalar essas dependências, você pode criar um novo projeto React usando Vite executando o comando yarn vite em seu terminal.

yarn vite

Este comando criará uma nova pasta com todos os arquivos e dependências necessários pré-instalados. Navegue até a pasta e inicie o servidor de desenvolvimento com o comando yarn start.

yarn start

Instalando o Framer Motion no React

Instale o Framer Motion executando este comando:

npm install framer-motion

Este comando adicionará Framer Motion como uma dependência ao seu projeto.

Animando um componente

Para animar um componente conforme ele entra e sai da tela no React usando Framer Motion, você precisa envolvê-lo no componente de movimento.

O componente de movimento fornece um conjunto de propriedades para animar a entrada e a saída do componente. Você pode usar os adereços inicial, animado e de saída para controlar sua visibilidade e posição.

Para vê-lo em ação, adicione o seguinte código na parte superior de App.jsx para importar o componente de movimento do framer-motion.

import { motion } from "framer-motion";

Em seguida, crie o componente que deseja animar envolvendo-o com o componente de movimento. Este exemplo usa um elemento div, mas você pode usar qualquer outro elemento que desejar, como botão, li e p, entre outros.

import { motion, AnimatePresence } from "framer-motion"
function App() {
  return (
    <>
      <AnimatePresence>
        <motion.div
          initial={{ x: -100, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          exit={{ x: -100, opacity: 0 }}
        >
          <p>Sent!</p>
        </motion.div>
      <AnimatePresence>
    </>
  )
}

O componente de movimento permite animar o elemento div contendo o texto "Enviado!".

As propriedades initial, animate e exit do componente de movimento definem as animações de entrada e saída do componente. Quando o componente é renderizado inicialmente, ele começará com uma posição x de -100 (fora da tela à esquerda) e uma opacidade de 0 e se tornará invisível.

A propriedade animate define como o componente deve ser animado quando entra na tela, neste caso movendo-se de uma posição x de -100 para uma posição x de 0 (deslizando da esquerda) e gradualmente desaparecendo em uma opacidade de 1 e tornando-se totalmente visível.

Finalmente, a propriedade exit define como o componente deve ser animado quando você o remove da tela. Nesse caso, o componente deslizará para fora da tela para a esquerda com uma posição x de -100 e desaparecerá gradualmente até uma opacidade de 0.

Você também precisa envolver o componente de movimento com o componente AnimatePresence do framer-motion para animar os componentes ao removê-los da árvore React DOM.

Agora que você definiu as animações de entrada e saída, pode adicionar um botão para acionar a animação. Aqui está o componente modificado com o botão:

import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
function App() {
  const [isVisible, setIsVisible] = useState(true);
  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };
  return (
    <>
      <AnimatePresence>
        {isVisible && ( <motion.div
          initial={{ x: -100, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          exit={{ x: -100, opacity: 0 }}
        >
          <p>Sent!</p>
        </motion.div>)}
      </AnimatePresence>
      <button onClick={toggleVisibility}>
        Notify
      </button>
    </>
  )
}

Este código atualizado adiciona uma variável de estado chamada isVisible usando o gancho useState. Esta variável rastreia se o componente deve estar visível. A função toggleVisibility alterna o valor de isVisible entre verdadeiro e falso quando você clica no botão.

Agora você está renderizando o componente condicionalmente, dependendo do valor de isVisible. Se isVisible for verdadeiro, o componente de movimento será renderizado com a animação de entrada.

Por fim, adicione um manipulador de eventos onClick ao botão que chama a função toggleVisibility, atualiza o estado de isVisible e aciona a animação de entrada ou saída do componente de movimento.

Adicionando uma função de atenuação

Uma função de atenuação controla a taxa de mudança da animação ao longo do tempo. Ele define o tempo de uma animação especificando como a animação deve acelerar ou desacelerar à medida que avança. Sem uma função de atenuação, a animação pode ser renderizada muito rapidamente.

Framer Motion oferece várias funções de atenuação para você escolher, incluindo easyInOut. Importe-o na parte superior do App.jsx do framer-motion para usá-lo.

import { motion, easeInOut } from "framer-motion";

Em seguida, adicione-o ao objeto de transição no componente de movimento:

<motion.div
    initial={{ x: -100, opacity: 0 }}
    animate={{ x: 0, opacity: 1, transition: { duration: 0.5, ease: easeInOut } }}
    exit={{ x: -100, opacity: 0, transition: { duration: 0.5, ease: easeInOut } }}
>
    <p>Sent!</p>
</motion.div>

A propriedade duração especifica quanto tempo a animação deve ser executada.

Use CSS simples para animações simples

Há muito mais que você pode fazer com o Framer Motion, incluindo animação 3D. No entanto, nem sempre você precisa de uma biblioteca para criar animações. Para animações simples, como transições instantâneas, você sempre pode usar CSS simples.