Bloco 1 · Web interactiva

A tríade da web

A interactividade nasce da ligação entre as três, com o JS a reagir a eventos.

O DOM

O DOM (Document Object Model) é a representação da página como uma árvore de objectos que o JavaScript pode ler e alterar.

const btn = document.querySelector('.botao');
btn.textContent = 'Clicado!';
btn.classList.add('activo');

Manipular o DOM = mudar a página em tempo real.

Eventos

A interacção baseia-se em eventos:

btn.addEventListener('click', () => {
  caixa.classList.toggle('aberta');
});

Padrão: classe + transição

Boa prática: o JS alterna classes, o CSS trata da animação.

menu.classList.toggle('aberto');

.menu { transform: translateX(-100%); transition: transform .3s; }
.menu.aberto { transform: translateX(0); }

Separa lógica (JS) de aparência (CSS).

Bloco 2 · Animação CSS

Transitions

Uma transition anima a mudança de uma propriedade:

.botao {
  background: #4F46E5;
  transition: background .3s ease, transform .2s;
}
.botao:hover {
  background: #4338CA;
  transform: translateY(-2px);
}

Simples e performante para estados (hover, focus).

Keyframes

Para animações com várias etapas usa-se @keyframes:

@keyframes pulsar {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.icone { animation: pulsar 1s infinite; }

Controla-se duração, repetição, direcção e easing.

Transform

transform é a propriedade-chave da animação:

Anima na GPU (compositor), sem reflow → muito performante.

Animações performantes

• Animar transform e opacity (baratas).
• Evitar animar width, height, top, left (causam reflow).
• Usar will-change com moderação.

Objectivo: 60 fps, movimento fluido.

Bloco 3 · Animação com JavaScript

Quando usar JS

CSS chega para a maioria. Recorre-se a JS quando é preciso:

• Sincronizar várias animações (timelines).
• Reagir a lógica/dados.
• Controlo fino de progresso (scroll, arrasto).

requestAnimationFrame

A base de animação por JS sincronizada com o ecrã:

function loop() {
  // actualizar posição/estado
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Melhor que setInterval: alinha com o refresh (60 fps) e pausa em abas inactivas.

GSAP

GSAP é a biblioteca standard de animação web:

gsap.to('.caixa', { x: 200, rotation: 360, duration: 1 });

• Sintaxe simples e poderosa.
• Performante e fiável entre browsers.
• Timelines, easing avançado, plugins.

Timelines (GSAP)

As timelines sequenciam e sincronizam animações:

const tl = gsap.timeline();
tl.from('.titulo', { y: 50, opacity: 0 })
  .from('.texto',  { y: 30, opacity: 0 }, '-=0.3')
  .from('.botao',  { scale: 0 });

Controlo total do timing relativo. Alternativa leve: Anime.js.

Bloco 4 · Scroll e parallax

Scroll-triggered animations

Animações que disparam à medida que se faz scroll:

• Elementos que entram com fade/slide.
• Revelar conteúdo progressivamente.
• Storytelling visual.

Dão dinamismo e guiam a leitura da página.

Intersection Observer

API nativa eficiente para detectar quando um elemento entra no ecrã:

const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('visivel');
  });
});
obs.observe(document.querySelector('.card'));

Sem ouvir scroll constantemente — performante.

Parallax

O parallax move camadas a velocidades diferentes, criando profundidade:

• Fundo move-se mais devagar que o primeiro plano.
• Sensação de 3D.
• Usar com moderação (pode enjoar/pesar).

ScrollTrigger (GSAP)

Plugin que liga animações ao scroll com precisão:

gsap.to('.painel', {
  x: -1000,
  scrollTrigger: {
    trigger: '.seccao',
    start: 'top top',
    scrub: true,   // animação ligada ao scroll
    pin: true
  }
});

Permite scroll horizontal, pin, scrub e marcadores.

Bloco 5 · SVG interactivo

Porquê SVG

O SVG é gráfico vectorial em XML:

• Escalável sem perder qualidade.
• Estilizável com CSS.
• Animável (cada forma é um elemento).
• Leve para ícones e ilustrações.

Animar SVG

.linha {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: desenhar 2s forwards;
}
@keyframes desenhar { to { stroke-dashoffset: 0; } }

Efeito de desenho de traço (line drawing) muito usado.

Morphing e micro-animações

• Morphing: transformar uma forma noutra (ex: menu X).
• Micro-animações: ícones que reagem (coração que bate, check que aparece).
• Bibliotecas: GSAP (MorphSVG), Lottie (animações After Effects em JSON).

Lottie

Lottie reproduz animações vectoriais complexas (criadas em After Effects) exportadas em JSON:

• Leves e nítidas.
• Ideais para ilustrações animadas, loaders, ícones ricos.
• Controláveis por JS.

Bloco 6 · Performance e acessibilidade

60 fps

Movimento fluido = 60 frames por segundo (16,7 ms por frame).

• Animar transform/opacity.
• Evitar layout thrashing (ler e escrever o DOM em ciclo).
• Medir no painel Performance do DevTools.

will-change

will-change avisa o browser para optimizar um elemento:

.card { will-change: transform; }

• Usar com moderação e só durante a animação.
• Em excesso, consome memória e prejudica.

prefers-reduced-motion

Respeitar quem prefere menos movimento (acessibilidade):

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Algumas pessoas sentem náuseas com animações; reduzir é obrigatório.

Optimização e boas práticas

• Animação ao serviço da clareza, não decoração.
• Não animar tudo ao mesmo tempo.
• Garantir que a interface funciona sem animação.
• Testar em dispositivos modestos.