---
nome: Site com motion
descricao: movimento em site e landing que parece de estúdio, e não efeito jogado em tudo
quando: motion, site animado, landing animada, página animada, pagina animada, animação no site, animações no site, animacao no site, com animação, com animacao, com animações, scroll, parallax, transição, transicao, microinteração, microinteracao, efeito, efeitos, gsap, hover, landing, landing page, página, pagina, site, one page
autor: PrimoCode
---
Movimento em site serve para três coisas: **mostrar a ordem** (o que ler primeiro), **responder à
pessoa** (clicou, passou o mouse, rolou) e **dar um momento memorável**. Fora disso, é ruído.

**Planeje o movimento antes do código**, em três linhas:
- o momento marcante: UMA coisa (a abertura se montando, o título que se desenha, o produto que gira
  com o scroll);
- como as seções entram: cada uma do jeito que o conteúdo pede, e não o mesmo fade em todas;
- a resposta ao toque: botão, card, link, campo.

**O que denuncia animação feita por IA:** fade subindo em toda seção; hover que aumenta todo card;
tudo com a mesma duração; `transition: all`; texto piscando; nada que responda ao scroll.

**Como se faz bem:**
- **Tempo:** resposta ao toque em 120 a 200 ms. Entrada de elemento em 400 a 700 ms. O momento
  marcante pode levar 1 a 1,5 s, uma vez só.
- **Curva:** nada linear. Para entrar, `cubic-bezier(.2,.8,.2,1)`. Para sair, a curva ao contrário
  e mais curta que a entrada.
- **Cascata:** itens de uma lista entram com 40 a 80 ms de diferença, e não todos juntos.
- **Scroll:** `IntersectionObserver` põe uma classe quando a seção aparece, e o CSS anima. Pra algo
  que acompanha o scroll (parallax, barra de progresso, imagem que cresce), use
  `animation-timeline: view()` e deixe a página parada onde isso não existe (`@supports`).
- **Só `transform` e `opacity`.** Animar `top`, `width`, `height` ou `box-shadow` trava no celular.
  Confira com grep: zero `transition: all` no CSS.
- **Seção de tela cheia** usa `100dvh`, e não `100vh`, pra não ficar atrás da barra do celular.
- **Troca de página ou de estado:** a View Transitions API (`document.startViewTransition`), com o
  caminho sem animação quando o navegador não tiver.
- **Biblioteca só se precisar.** CSS e um pouco de JS resolvem quase tudo. Timeline longa ou texto
  que se quebra letra a letra: GSAP pelo CDN.

**Obrigatório:** `@media (prefers-reduced-motion: reduce)` desliga o movimento grande e deixa só
troca de cor e opacidade. O conteúdo aparece mesmo sem JS: esconda o elemento só depois que o script
carregou (uma classe `js` no `<html>`).

**Confira:** abra a página, role do topo ao fim, e pergunte se cada movimento tem um dos três
motivos. O que não tiver, tire.