0Pricing
React Academy · Aula

Variantes para animações orquestradas

Defina objetos de variantes nomeados e propague-os pelas árvores de componentes pai-filho.

Variantes para animações orquestradas é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que são variantes

Variantes são estados de animação nomeados, definidos como objetos. Em vez de valores em linha, os componentes fazem referência a nomes de variantes, como 'hidden' e 'visible'. Os componentes pais podem orquestrar os filhos automaticamente.

Definindo variantes

Crie um objeto de variantes com estados nomeados. Passe-o para a propriedade variants de um componente de movimento.

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={cardVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.4 }}
/>

Animação escalonada dos filhos

Use staggerChildren na transição de um pai para animar os filhos um após o outro, com um atraso entre cada um.

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0 },
};

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

Propagação de variantes

Quando o estado de variante de um pai muda, todos os filhos que compartilham o mesmo nome de variante também são animados automaticamente — não é necessário passar animate para cada filho.

// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };

<motion.div variants={parent} initial="hidden" animate="visible">
  <motion.p variants={child}>First</motion.p>
  <motion.p variants={child}>Second</motion.p>
  <motion.p variants={child}>Third</motion.p>
</motion.div>

Alternando entre estados

Controle qual variante está ativa com uma variável de estado. O Framer Motion faz uma transição suave entre os estados nomeados.

const [isOpen, setIsOpen] = useState(false);

const panelVariants = {
  closed: { height: 0, opacity: 0 },
  open: { height: 'auto', opacity: 1 },
};

<motion.div
  variants={panelVariants}
  animate={isOpen ? 'open' : 'closed'}
  initial="closed"
  transition={{ duration: 0.3 }}
/>

Transição personalizada por variante

Adicione uma chave transition dentro de uma variante para personalizar o tempo apenas desse estado específico.

const menuVariants = {
  closed: {
    scaleY: 0,
    transition: { duration: 0.2, ease: 'easeIn' },
  },
  open: {
    scaleY: 1,
    transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
  },
};

Variantes de saída com AnimatePresence

Adicione uma chave exit ao objeto de variantes e envolva o componente com AnimatePresence para animá-lo durante a desmontagem.

const pageVariants = {
  initial: { opacity: 0, x: '100%' },
  enter: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: '-100%' },
};

<AnimatePresence mode="wait">
  <motion.div
    key={router.pathname}
    variants={pageVariants}
    initial="initial"
    animate="enter"
    exit="exit"
    transition={{ duration: 0.3 }}
  />
</AnimatePresence>

Substituições de variantes aninhadas

Os filhos podem substituir o estado de variante herdado com suas próprias propriedades initial ou animate, saindo da orquestração do pai quando necessário.

useAnimation para controle imperativo de variantes

useAnimation() retorna um objeto de controles de animação. Chame controls.start('variantName') programaticamente para acionar variantes.

const controls = useAnimation();

async function sequence() {
  await controls.start('wiggle');
  await controls.start('bounce');
}

<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />

Opções de orquestração

Além de staggerChildren, você pode usar when ('beforeChildren' | 'afterChildren') para sequenciar as animações do pai e dos filhos.

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: 'beforeChildren', // parent fades in before stagger starts
      staggerChildren: 0.1,
    },
  },
};

Bibliotecas reutilizáveis de variantes

Defina variantes em um arquivo compartilhado e importe-as onde necessário para manter as configurações de animação consistentes em todo o aplicativo.

// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };

// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />

Verificação rápida

Qual opção de transição do Framer Motion atrasa as animações dos filhos, uma após a outra?

Recapitulação

Variantes são estados nomeados, definidos como objetos. Defina staggerChildren na transição de um pai para propagar animações automaticamente pelos filhos. Use useAnimation() para controle imperativo e AnimatePresence com variantes de saída para animações durante a desmontagem.

Perguntas Frequentes

A aula “Variantes para animações orquestradas” é grátis?

Sim — o texto completo de “Variantes para animações orquestradas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Variantes para animações orquestradas”?

Defina objetos de variantes nomeados e propague-os pelas árvores de componentes pai-filho. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Variantes para animações orquestradas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Componentes de movimento e animações básicas
  2. Variantes para animações orquestradas
  3. Animações de gestos: passar o cursor, tocar e arrastar
  4. Animações de layout e AnimatePresence
← Voltar para React Academy