UC02650

Construir interfaces e animações interativas

Web interactiva com CSS, JavaScript e GSAP

Curso profissional · 25h · TMM

Plano

  1. Web interactiva
  2. Animação CSS
  3. Animação com JavaScript
  4. Scroll e parallax
  5. SVG interactivo
  6. Performance e acessibilidade

Bloco 1 · Web interactiva

A tríade da web

Tecnologia Papel
HTML Estrutura (o quê)
CSS Apresentação (aspecto)
JavaScript Comportamento (interacção)

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');
});
Evento Quando
click Clique
mouseenter/leave Cursor
scroll Deslocamento
input Escrita
keydown Tecla

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:

Função Efeito
translate Mover
scale Redimensionar
rotate Rodar
skew Inclinar

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.

UC02650 · resumo

  • Web interactiva: HTML/CSS/JS, DOM e eventos; JS alterna classes, CSS anima.
  • CSS: transitions, keyframes e transform/opacity performantes.
  • JavaScript: requestAnimationFrame, GSAP e timelines.
  • Scroll: Intersection Observer, parallax e ScrollTrigger.
  • SVG animável (line drawing, morphing) e Lottie.
  • Performance (60 fps, will-change) e acessibilidade (prefers-reduced-motion).

NOTAS DO PROFESSOR 📖 A divisão de papéis entre HTML, CSS e JS Antes de animar seja o que for, é preciso solidificar que cada tecnologia tem um papel distinto: estrutura, aparência e comportamento. Muitos juniores misturam responsabilidades — estilo no JS, comportamento no HTML — e o código fica frágil. A interactividade desta unidade vive precisamente na fronteira entre as três, com o JS a orquestrar. 🗣️ Pontos a desenvolver oralmente • Dar o exemplo do corpo humano: esqueleto (HTML), roupa (CSS), músculos (JS). • Mostrar a mesma página com e sem CSS, e depois com e sem JS. • Antecipar o princípio do curso: deixar o CSS animar e o JS só decidir.

NOTAS DO PROFESSOR 📖 O DOM como ponte entre código e ecrã O DOM é o conceito central que destrava tudo o resto: é a árvore de objectos que o JavaScript pode ler e alterar para mudar a página sem a recarregar. O `querySelector` é a ferramenta do dia-a-dia para apanhar elementos, reutilizando a sintaxe dos selectores CSS que já conhecem. Ver a página mudar em tempo real costuma ser o momento "aha" dos formandos. 🗣️ Pontos a desenvolver oralmente • Mostrar a árvore do DOM no separador Elements do DevTools. • Reaproveitar o conhecimento de selectores CSS para o querySelector. • Distinguir alterar textContent, classes e atributos.

NOTAS DO PROFESSOR 📖 Eventos: como a página "ouve" o utilizador Os eventos são o motor de toda a interactividade: o JS fica à escuta e reage quando algo acontece. O `addEventListener` é o padrão moderno e deve ser ensinado desde início, em vez dos atributos `onclick` no HTML. Vale a pena explorar a tabela porque cada tipo de evento abre portas diferentes (clique, cursor, scroll, teclado). 🗣️ Pontos a desenvolver oralmente • Explicar o modelo "ouvir e reagir" com um exemplo do quotidiano (campainha). • Justificar addEventListener face ao onclick inline (separação e múltiplos ouvintes). • Mostrar a função callback a receber o objecto do evento.

NOTAS DO PROFESSOR 📖 O padrão de ouro: JS alterna classes, CSS anima Este é talvez o conceito mais importante da unidade inteira. Em vez de o JS manipular estilos directamente, ele apenas adiciona ou remove uma classe, e o CSS trata de toda a transição. Isto mantém o código limpo, performante e fácil de manter, e é o padrão que se espera ver em código profissional. 🗣️ Pontos a desenvolver oralmente • Contrastar este padrão com a alternativa de mexer estilos inline no JS. • Mostrar como toda a animação fica concentrada e legível no CSS. • Reforçar como facilita mudar a aparência sem tocar na lógica.

NOTAS DO PROFESSOR 📖 Transitions: a animação mais fácil e útil As transitions são a porta de entrada mais natural na animação: definem-se uma vez e animam suavemente qualquer mudança de estado. São perfeitas para hover e focus, que cobrem a maioria das necessidades de feedback visual. Reforçar que a propriedade `transition` se declara no estado base, não no `:hover`. 🗣️ Pontos a desenvolver oralmente • Explicar a sintaxe: propriedade, duração e função de easing. • Mostrar o erro comum de pôr a transition no :hover (animação só num sentido). • Ligar ao feedback visual: o utilizador percebe que algo é clicável.

NOTAS DO PROFESSOR 📖 Keyframes: animações com várias etapas Quando uma transition de A para B não chega, os `@keyframes` permitem definir estados intermédios e animações em ciclo. O exemplo do pulsar é excelente porque mostra o valor a ir e voltar (0%, 50%, 100%). Distinguir bem transition (mudança entre dois estados) de animation (sequência autónoma e repetível). 🗣️ Pontos a desenvolver oralmente • Contrastar transition e keyframes: quando cada uma é a escolha certa. • Explorar as propriedades de animation (duration, iteration, direction, timing). • Avisar contra abusar do infinite, que pode distrair o utilizador.

NOTAS DO PROFESSOR 📖 Transform: a propriedade que anima sem custar O `transform` é a estrela da animação web porque corre na GPU e não obriga o browser a recalcular o layout (reflow). Esta é a razão técnica por trás da regra "anima transform e opacity". Mover com `translate` em vez de mexer em `top`/`left` é a diferença entre uma animação fluida e uma aos solavancos. 🗣️ Pontos a desenvolver oralmente • Explicar reflow vs composição de forma simples (recalcular tudo vs só mover). • Demonstrar a diferença de fluidez entre translate e left no DevTools. • Apresentar as quatro funções (translate, scale, rotate, skew) com exemplos.

NOTAS DO PROFESSOR 📖 A regra de ouro das animações performantes Este slide consolida o princípio prático: animar `transform` e `opacity`, evitar `width`, `height`, `top`, `left`. Estas últimas forçam reflow a cada frame e estragam a fluidez. O `will-change` é uma ajuda, mas usada em excesso prejudica — é uma faca de dois gumes que se revisita mais à frente no curso. 🗣️ Pontos a desenvolver oralmente • Repetir a lista de propriedades baratas vs caras como regra prática. • Mostrar um exemplo de animação a "engasgar" por animar a largura. • Avisar que will-change não é para pôr em tudo.

NOTAS DO PROFESSOR 📖 CSS primeiro, JS quando for preciso mais Um princípio de maturidade técnica é não saltar logo para o JavaScript: o CSS resolve a maioria das animações com menos código e mais performance. O JS entra quando é preciso sincronizar várias animações, reagir a dados ou ligar o movimento a um gesto contínuo como o scroll. Saber escolher a ferramenta certa é sinal de bom critério. 🗣️ Pontos a desenvolver oralmente • Dar exemplos concretos de cada caso onde o JS se justifica. • Reforçar que mais JavaScript não significa melhor solução. • Antecipar GSAP e timelines como resposta à sincronização complexa.

NOTAS DO PROFESSOR 📖 requestAnimationFrame: a forma certa de animar em JS O `requestAnimationFrame` é a base técnica de qualquer animação feita à mão em JavaScript. A vantagem sobre o `setInterval` é dupla: sincroniza com a taxa de actualização do ecrã, evitando frames a mais ou a menos, e pausa automaticamente quando a aba está inactiva, poupando bateria. Mesmo que usem GSAP, é importante perceber o que está por baixo. 🗣️ Pontos a desenvolver oralmente • Explicar o loop recursivo do rAF e onde se actualiza o estado. • Contrastar com setInterval e os seus problemas de timing. • Referir que bibliotecas como GSAP usam rAF internamente.

NOTAS DO PROFESSOR 📖 GSAP: o standard da indústria O GSAP é a biblioteca que se encontra na maioria dos sites premiados e em produções profissionais. A sua força é juntar uma sintaxe muito simples (`gsap.to`) a um motor robusto e fiável entre browsers. Para o formando, é a ponte entre as animações básicas de CSS e os efeitos complexos que vê em sites de referência. 🗣️ Pontos a desenvolver oralmente • Ler a linha de gsap.to e explicar cada propriedade do objecto. • Sublinhar a fiabilidade entre browsers como grande vantagem prática. • Mencionar o ecossistema de plugins (ScrollTrigger, MorphSVG) que se verá a seguir.

NOTAS DO PROFESSOR 📖 Timelines: sequenciar como num vídeo As timelines resolvem o problema de coordenar várias animações: em vez de calcular delays à mão, encadeiam-se os passos e o GSAP trata do timing. O detalhe poderoso é o offset relativo (`'-=0.3'`), que faz a animação seguinte começar a sobrepor-se à anterior. Pensar numa timeline é como pensar numa linha de tempo de edição de vídeo. 🗣️ Pontos a desenvolver oralmente • Demonstrar o encadeamento de uma entrada de título, texto e botão. • Explicar o offset relativo e como cria fluidez entre passos. • Referir Anime.js como alternativa mais leve para casos simples.

NOTAS DO PROFESSOR 📖 Animar ao ritmo do scroll As animações disparadas pelo scroll são das mais usadas em sites modernos porque acompanham a leitura natural do utilizador. Bem feitas, revelam conteúdo no momento certo e contam uma história visual; mal feitas, atrasam e irritam. O propósito deve ser sempre guiar a atenção, não encher a página de movimento. 🗣️ Pontos a desenvolver oralmente • Mostrar exemplos reais de revelar conteúdo com fade/slide ao fazer scroll. • Ligar ao storytelling: o movimento conduz o olhar pela página. • Avisar contra o excesso, que torna o site lento de percorrer.

NOTAS DO PROFESSOR 📖 Intersection Observer: detectar entrada no ecrã sem custo Esta API nativa resolve um problema clássico de performance: detectar quando um elemento aparece no ecrã sem estar constantemente a ouvir o evento de scroll. O browser avisa só quando o elemento cruza o limite definido. É a base moderna para revelar elementos e fazer lazy load, e substitui hacks antigos pesados. 🗣️ Pontos a desenvolver oralmente • Explicar porque ouvir o scroll a toda a hora prejudica a performance. • Ler o callback e o isIntersecting para perceber o padrão. • Ligar ao padrão de adicionar uma classe quando o elemento fica visível.

NOTAS DO PROFESSOR 📖 Parallax: profundidade com velocidades diferentes O parallax cria a ilusão de profundidade ao mover camadas a ritmos distintos, com o fundo mais lento que o primeiro plano. É um efeito de grande impacto visual mas que exige contenção: em excesso, pesa, desorienta e pode causar enjoo. Bem doseado, dá um toque premium a uma secção de destaque. 🗣️ Pontos a desenvolver oralmente • Explicar a ilusão com a analogia da paisagem vista do carro em andamento. • Avisar sobre o custo de performance e o risco de enjoo (motion sickness). • Ligar à acessibilidade: respeitar prefers-reduced-motion (visto mais à frente).

NOTAS DO PROFESSOR 📖 ScrollTrigger: ligar animação ao scroll com precisão O ScrollTrigger é o plugin que torna profissionais os efeitos de scroll, oferecendo controlo fino que seria penoso de fazer à mão. Os dois conceitos-chave são o `scrub` (ligar o progresso da animação ao scroll) e o `pin` (fixar a secção enquanto a animação decorre). Os marcadores de debug ajudam imenso a ver onde começa e acaba cada gatilho. 🗣️ Pontos a desenvolver oralmente • Distinguir scrub (animação atada ao scroll) de disparar uma vez ao entrar. • Explicar o pin e o efeito de scroll horizontal dentro de uma secção fixa. • Demonstrar os marcadores (markers) durante o desenvolvimento.

NOTAS DO PROFESSOR 📖 SVG: gráfico que se programa e anima O SVG é especial porque é vectorial e baseado em XML, o que significa que cada forma é um elemento que se pode estilizar com CSS e animar individualmente. É a escolha certa para ícones e ilustrações porque escala sem perder nitidez em qualquer ecrã. Ao contrário de uma imagem rasterizada, está "vivo" no DOM. 🗣️ Pontos a desenvolver oralmente • Comparar SVG com PNG/JPEG em termos de nitidez ao ampliar. • Mostrar que cada forma do SVG é acessível por CSS e JS. • Ligar à leveza para ícones face a fontes de ícones ou imagens.

NOTAS DO PROFESSOR 📖 O truque do desenho de traço O efeito de linha a desenhar-se sozinha é dos mais reconhecíveis na web e parece complicado, mas assenta num truque simples: o `stroke-dasharray` cria um traço tão longo como a linha, e animar o `stroke-dashoffset` revela-o progressivamente. Vale a pena fazer ao vivo porque o resultado impressiona e a técnica é acessível. 🗣️ Pontos a desenvolver oralmente • Explicar passo a passo o que fazem dasharray e dashoffset. • Mostrar como medir o comprimento do traço para acertar os valores. • Sugerir aplicações: logótipos, assinaturas, ilustrações de linha.

NOTAS DO PROFESSOR 📖 Micro-animações que dão alma à interface O morphing e as micro-animações são detalhes que distinguem uma interface polida de uma genérica: um ícone de menu que se transforma num X, um coração que bate ao ser clicado. Estes pormenores comunicam estado e dão prazer de uso sem distrair. As bibliotecas referidas tratam da parte difícil da transformação entre formas. 🗣️ Pontos a desenvolver oralmente • Distinguir morphing (forma A vira forma B) de micro-animação (reacção breve). • Mostrar exemplos de micro-interacções (like, check, hambúrguer para X). • Reforçar que estes detalhes elevam a percepção de qualidade do produto.

NOTAS DO PROFESSOR 📖 Lottie: animação complexa em ficheiro leve O Lottie resolve um problema real: como pôr na web uma animação rica feita em After Effects sem o peso de um vídeo. Exporta-se para JSON, fica leve e nítido em qualquer resolução, e pode ser controlado por código. É a ponte ideal entre o trabalho de motion designers e os developers do curso. 🗣️ Pontos a desenvolver oralmente • Explicar o fluxo: animar no After Effects, exportar com o plugin, usar na web. • Comparar o peso e a nitidez de um Lottie face a um GIF ou vídeo. • Dar casos de uso: loaders, ilustrações animadas, ícones ricos.

NOTAS DO PROFESSOR 📖 60 fps: o orçamento de tempo por frame Pôr um número concreto ajuda: para haver fluidez, cada frame tem de estar pronto em 16,7 ms. Se a animação demora mais, o utilizador vê solavancos (jank). O "layout thrashing" — ler e escrever o DOM em ciclo — é uma causa frequente e sorrateira. O painel Performance do DevTools mostra onde se perdem frames. 🗣️ Pontos a desenvolver oralmente • Traduzir 60 fps em 16,7 ms por frame como orçamento de tempo. • Explicar layout thrashing com um exemplo de ler e escrever em alternância. • Demonstrar uma gravação no painel Performance e a leitura dos frames.

NOTAS DO PROFESSOR 📖 will-change: uma ajuda a usar com cabeça O `will-change` avisa o browser para preparar um elemento que vai ser animado, promovendo-o a uma camada própria. O paradoxo é que, usado em excesso, faz o contrário do pretendido: consome memória e degrada a performance. A regra é aplicá-lo só ao que vai mesmo animar, e idealmente só durante a animação. 🗣️ Pontos a desenvolver oralmente • Explicar o que significa promover um elemento a camada de composição. • Avisar contra o anti-padrão de pôr will-change em tudo "por garantia". • Sugerir aplicá-lo e removê-lo via JS no início e fim da animação.

NOTAS DO PROFESSOR 📖 Animação acessível: respeitar quem prefere menos movimento A acessibilidade não é opcional: há pessoas para quem o movimento causa náuseas ou desconforto real (perturbações vestibulares). O sistema operativo expõe essa preferência, e o `prefers-reduced-motion` permite respeitá-la, desligando ou suavizando animações. Implementar isto distingue um profissional consciente de um amador. 🗣️ Pontos a desenvolver oralmente • Explicar onde o utilizador activa "reduzir movimento" no sistema. • Mostrar a media query a desligar ou suavizar as animações. • Reforçar que respeitar isto é uma obrigação ética e, cada vez mais, legal.

NOTAS DO PROFESSOR 📖 A animação ao serviço da clareza, não da decoração Este slide é a síntese de atitude da unidade: a animação deve servir um propósito — guiar, dar feedback, contar uma história — e nunca ser decoração gratuita. Animar tudo ao mesmo tempo cansa e confunde. A regra de ouro é garantir que a interface continua perfeitamente funcional mesmo sem qualquer animação. 🗣️ Pontos a desenvolver oralmente • Discutir a diferença entre animação com propósito e enfeite. • Insistir no teste em dispositivos modestos, não só na máquina potente do dev. • Reforçar a regra: o site tem de funcionar mesmo com as animações desligadas.