Pular para o conteúdo
~/.primo-academy.sh
Intermediário

Motion: animacao JS declarativa, View Transitions, Rive e a11y

Trilha sobre animacao JS declarativa em React: Motion (ex-Framer Motion) para gestural, layout animations e AnimatePresence, View Transitions API nativa do browser para transicoes de estado, Rive/Lottie para animacoes vetoriais vindas do design, e acessibilidade (prefers-reduced-motion, vestibular disorders) como requisito desde o design. Complementa a `css-animacoes` (que cobre CSS-only) com a camada JS e API nativa para padroes que CSS nao resolve.

// criado por

  1. Motion vs CSS: quando usar cada um (arvore de decisao)
  2. Motion basico: motion, AnimatePresence, variants, transitions
  3. Padroes de animacao: layout, gestures, drag, scroll-linked
  4. View Transitions API: transicoes nativas do browser
  5. Rive e Lottie: animacoes vetoriais vindas do design
  6. Acessibilidade em animacao: prefers-reduced-motion, performance, WCAG 2.3.3
  7. Projeto final: landing page com animacoes intencionais e a11y desde o design

// avaliação da trilha

—
ainda sem avaliações