Framer Motion é, na minha opinião, a melhor biblioteca de animação para React. Ela combina uma API declarativa com performance excelente.
Neste portfolio, uso Framer Motion em praticamente tudo: entrada de elementos na tela, transições entre estados, animações de hover e o lightbox de imagens.
O segredo para animações que parecem naturais está nas curvas de easing. Em vez de usar "ease-in-out" genérico, uso curvas customizadas como [0.25, 0.46, 0.45, 0.94] que dão um feeling mais orgânico.
Para animações triggered por scroll, o whileInView é perfeito. Basta definir o estado inicial e o estado final, e o Framer Motion cuida da transição quando o elemento entra no viewport.
Outro padrão que uso muito é o staggerChildren — quando tenho uma lista de itens, cada um entra com um pequeno delay em relação ao anterior, criando um efeito cascata elegante.
Uma dica importante: sempre use viewport={{ once: true }} para animações de entrada. Sem isso, o elemento re-anima toda vez que sai e volta ao viewport, o que pode ser irritante.
O AnimatePresence é essencial para animações de saída. Sem ele, componentes simplesmente desaparecem do DOM. Com ele, você pode definir transições de exit suaves.