Front-end5 min de leitura

Microinterações e Animações Fluidas com Framer Motion

Veja como transformar interfaces estáticas em experiências dinâmicas de alto nível utilizando a biblioteca Framer Motion no React.

12 de agosto de 2026

Em produtos digitais de alta qualidade, a transição entre telas ou o comportamento de um botão não é imediato ou seco. O Framer Motion é uma biblioteca para React que facilita a criação de animações baseadas em física (springs), resultando em interfaces que parecem 'vivas'.

Conceitos Básicos

A mágica acontece substituindo as tags HTML padrão pelas tags do Framer Motion (<motion.div>, <motion.button>). Assim, você ganha acesso às propriedades de animação.

bash

npm install framer-motion

src/components/FadeInView.tsx

import { motion } from 'framer-motion';
import type { ReactNode } from 'react';

export function FadeInView({ children }: { children: ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

Microinterações (Hover e Tap)

Para botões, a resposta ao clique deve ser imediata. As propriedades whileHover e whileTap garantem um feedback tátil incrível.

src/components/Button.tsx

import { motion } from 'framer-motion';

export function InteractiveButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="bg-blue-600 text-white py-2 px-4 rounded"
    >
      Clique me
    </motion.button>
  );
}

Evitando Componentes Órfãos (AnimatePresence)

No React, quando um componente sai do DOM (por exemplo, ao fechar um Modal ou um Toast), ele desaparece instantaneamente. O Framer Motion resolve isso com o AnimatePresence.

src/components/ToastContainer.tsx

import { motion, AnimatePresence } from 'framer-motion';

interface ToastData {
  id: string;
  message: string;
}

export function ToastList({ toasts }: { toasts: ToastData[] }) {
  return (
    <div className="fixed bottom-4 right-4">
      <AnimatePresence>
        {toasts.map(toast => (
          <motion.div
            key={toast.id}
            initial={{ opacity: 0, x: 100 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 100 }}
          >
            {toast.message}
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

Lembre-se sempre de passar uma propriedade genérica de exclusão segura se for tipar o Toast (em vez de any, crie a interface correta). Mas o segredo é o AnimatePresence em volta e a propriedade exit no motion element.

Conclusão

Com poucas linhas de código, você adiciona um acabamento premium à sua aplicação, melhorando significativamente a Percepção de Valor por parte do usuário final.