# 176: Trabalhando com Framer Motion - CSS-Tricks

Anonim

Matt Perry do Framer e eu damos uma olhada na biblioteca de animação React Framer Motion.

Primeiro, vamos dar uma olhada em como a API é simples. Você controla tudo de forma muito declarativa por meio de adereços em elementos em seu JSX. O controle da animação nesta camada é muito intuitivo e conectado à IU e ao estado de uma maneira significativa.

Cada exemplo que examinamos é mais do mundo real e envolve mais recursos do que o Framer Motion é capaz. Os desenvolvedores do React vão adorar a sintaxe de tudo isso, e todos os outros vão adorar o desempenho incrível e os resultados suaves.

Terminamos olhando para o próprio Framer, que usa essa biblioteca exata internamente para fazer todas as coisas de animação que o Framer faz. Intrigado com Framer? Baixe Framer X.

Demonstração 1: sintaxe básica

Demo 2: Variantes

Demo 3: AnimatePresence e layoutTransition

Bônus: verifique a funcionalidade “role para dispensar” no pop-up da imagem.