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

Animar um componente React conforme ele entra ou sai da tela pode ser um desafio. Isso ocorre porque, quando você oculta 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 é o movimento do 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 easing 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 de botão 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á instale Node.js e npm (Node Package Manager) em sua máquina se você não tiver.

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

fio 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.

início do fio

Instalando o Framer Motion no React

Instale o Framer Motion executando este comando:

npm instalar framer-motion

Este comando adicionará o 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 o 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 props 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.

importar {movimento} de"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.

importar { movimento, AnimatePresence } de"framer-motion"
funçãoAplicativo() {
retornar (
 <>

 inicial={{ x: -100, opacidade: 0 }}
 animar={{ x: 0, opacidade: 1 }}
 saída={{ x: -100, opacidade: 0 }}
 >
Enviado!</p>
 </motion.div>

 </>
 )
}

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

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

A propriedade animate define como o componente deve se animar ao entrar na tela, neste caso passando de um x posição 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á da tela para a esquerda com uma posição x de -100 e desaparecerá gradualmente até uma opacidade de 0.

Você também precisa agrupar o componente de movimento com o componente AnimatePresence de 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:

importar { AnimatePresence, movimento } de"framer-motion";
importar { useState } de"reagir";
funçãoAplicativo() {
const [isVisible, setIsVisible] = useState(verdadeiro);
const alternarVisibilidade = () => {
 setIsVisible(!isVisible);
 };
retornar (
 <>

 {é visível && ( <movimento.div
 inicial={{ x: -100, opacidade: 0 }}
 animar={{ x: 0, opacidade: 1 }}
 saída={{ x: -100, opacidade: 0 }}
 >
Enviado!</p>
 </motion.div>)}
 </AnimatePresence>

 notificar
 </button>
 </>
 )
}

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

Você é agora 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 Easing

Uma função de easing controla a taxa de alteração 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 progride. Sem uma função de easing, a animação pode renderizar muito rápido.

O Framer Motion fornece várias funções de easing para escolher, incluindo easyInOut. Importe-o na parte superior do App.jsx do framer-motion para usá-lo.

importar { movimento, facilidadeInOut } de"framer-motion";

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

 inicial={{ x: -100, opacidade: 0 }}
 animar={{ x: 0, opacidade: 1, transição: { duração: 0.5, facilidade: easyInOut } }}
 saída={{ x: -100, opacidade: 0, transição: { duração: 0.5, facilidade: easyInOut } }}
>
Enviado!</p>
</motion.div>

A propriedade duration especifica por 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 de foco, você sempre pode usar CSS simples.