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.