Framer Motion API

The Transition Property

Animações e elementos personalizaveis para deixar a aplicação fluida e bonita. Também possível de se utilizar como Page Transition.

Instalação

• yarn add motion

⇒ Entendendo o Motion

Para realizar animações em um elemento através do Motion precisamos colocar antes de seu nome o motion., assim estaremos habilitando as props necessárias para realizar as animações e efeitos.

<motion.div></motion.div>

<motion.header></motion.header>

<motion.span></motion.span>

<motion.input... />
[...]

Desse modo, poderemos usar as seguintes props:

• initial
  • Qual o estado do elemento no inicio da animação
• animate
  • O estado do meio da animação, o que vai acontecer depois do estado initial
• exit
  • Qual a animação será feita antes do elemento ser destruido
  • Usado em transições de página ou troca de elementos em que haja a saida do elemento animado.
  • Logo, não é obrigatório
• variants
  • As definições em de objeto de cada um dos estados anteriores.

As props initial, animate e exit devem receber uma string com o nome da animação, essa string será usada como referência do estado dentro da props variants recebendo o objeto com as caracteristicas daquele estado da animação.

→ Primeiro Exemplo de como usar

const variacoesAnimadas= {
  **inicio: {
    opacity: 0.8,
    x: 1000,
  },
  animacao: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.5
    },
  },
  fim: {
    opacity: 0,
    x: 1000,
    transition: {
      duration: 1
    },
  }**
}

**<motion.div
  initial={"inicio"}
  animate={"animacao"}
  exit={"fim"}
  variants={variacoesAnimadas}
>
[...]
</motion.div>**

<aside> 💡 ⇒ Explicando o Exemplo: Aqui temos uma animação como um Slide. O estado initial com nome de inicio faz com que o elemento inicie no eixo X a 1000 pixels pra direita e menor opacidade. Quando vai para o estado animate com nome de animacao, que é o estado final da animação, a opacidade irá transitar de 0.8 até 1, o elemento vai do eixo X de 1000 até 0, e essa transição terá 0.5 segundos de duração.

E quando o elemento for sair da tela pelo estado exit, ele passará pelo fim, e da posição que ele estiver (a animate), ele vai para 0 de opacidade, eixo X de 1000 e come essa transição durando 1 segundo.

</aside>

→ Segundo Exemplo de como usar