MODULO 2.5

🎬 Motion Design para Web

Animacoes que encantam, guiam e comunicam. Aprenda a criar movimento com proposito usando CSS animations, timing functions e scroll-driven animations.

6
Topicos
30
Minutos
Medio
Nivel
Pratico
Tipo
1

🎭 Principios de Animacao

Os 12 principios de animacao da Disney, adaptados para web. Estes principios criam movimento que parece natural e engajante para o usuario.

🎬 Principios Essenciais para Web

Squash & Stretch

Deformacao que da peso e flexibilidade. Botoes que "apertam" ao clicar.

Anticipation

Preparacao antes da acao. Menu recua antes de expandir.

Ease In/Out

Aceleracao e desaceleracao natural. Nada comeca ou para bruscamente.

Secondary Action

Acoes secundarias reforçam a principal. Icone gira enquanto texto aparece.

👀 Demonstracao ao Vivo

Bounce

Squash & Stretch

Spin (Linear)

🎯 Vibe Coding Prompt

Use: animacoes que seguem principios de ease-in-out natural, squash and stretch sutil em botoes clicaveis, anticipation com pequeno recuo antes de acoes maiores.

2

🎨 CSS Animations

CSS Animations usam @keyframes para definir etapas do movimento e animation properties para controlar como a animacao se comporta.

💻 Sintaxe @keyframes

/* Definindo a animacao */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Ou com porcentagens */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

⚙️ Animation Properties

animation-name

Nome do @keyframes a usar

animation-duration

Duracao (ex: 0.3s, 500ms)

animation-timing-function

Curva de velocidade (ease, linear, cubic-bezier)

animation-delay

Tempo antes de iniciar

animation-iteration-count

Quantas vezes repetir (1, 3, infinite)

animation-fill-mode

Estado antes/depois (forwards, backwards, both)

💻 Exemplo Completo

/* Shorthand */
.element {
animation: fadeIn 0.6s ease-out forwards;
}
/* Longhand (mais controle) */
.element {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

🎯 Vibe Coding Prompt

Use: @keyframes para animacoes de entrada com fade e translate, animation-fill-mode forwards para manter estado final, animation-delay escalonado para sequencia de elementos.

3

⏱️ Timing e Easing

Timing functions controlam a velocidade da animacao ao longo do tempo. cubic-bezier permite criar curvas customizadas para movimento natural.

📈 Comparacao de Easing (clique para animar)

linear
ease
ease-in
ease-out
ease-in-out

🎛️ cubic-bezier Customizado

/* Sintaxe */
cubic-bezier(x1, y1, x2, y2)
/* Easing comuns */
ease-in-out:
cubic-bezier(0.42, 0, 0.58, 1)
ease-out:
cubic-bezier(0, 0, 0.58, 1)
/* Spring effect (overshoots) */
spring:
cubic-bezier(0.68, -0.55, 0.265, 1.55)
/* Bounce effect */
bounce:
cubic-bezier(0.34, 1.56, 0.64, 1)

Quando Usar Cada Easing

• ease-out: Elementos entrando na tela (modais, dropdowns)
• ease-in: Elementos saindo da tela
• ease-in-out: Transicoes de estado (hover, toggle)
• linear: Rotacoes continuas, progress bars
• spring: Feedback de botoes, elementos interativos divertidos

🎯 Vibe Coding Prompt

Use: ease-out para entrada de modais e menus, cubic-bezier spring para botoes interativos, duracoes de 200-400ms para UI, 400-600ms para transicoes de pagina.

4

📜 Scroll Animations

Animacoes disparadas pelo scroll criam experiencias imersivas. Use Intersection Observer para detectar elementos e scroll-driven animations para sincronizar com o scroll.

👁️ Intersection Observer

API nativa que detecta quando elementos entram ou saem da viewport. Perfeito para lazy loading e animacoes de entrada.

// Criar observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
// Observar elementos
document.querySelectorAll('.scroll-animate')
.forEach(el => observer.observe(el));

💻 CSS para Scroll Animations

/* Estado inicial (escondido) */
.scroll-animate {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
/* Quando visivel */
.scroll-animate.visible {
opacity: 1;
transform: translateY(0);
}
/* Variacoes */
.scroll-animate.from-left {
transform: translateX(-50px);
}
.scroll-animate.scale {
transform: scale(0.8);
}

🚀 CSS Scroll-Driven Animations (Moderno)

Nova API CSS que sincroniza animacoes diretamente com o scroll, sem JavaScript.

/* Animacao controlada por scroll */
@keyframes reveal {
from { opacity: 0; transform: translateY(100px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: reveal linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}

* Suporte: Chrome 115+, Edge 115+. Use com fallback JS.

🎯 Vibe Coding Prompt

Use: Intersection Observer para animar elementos ao entrar na viewport, fade-in com translateY para secoes de conteudo, staggered delays para listas e grids.

5

🚪 Page Transitions

Transicoes entre paginas criam fluidez na navegacao. View Transitions API permite animar entre estados de pagina, e tecnicas tradicionais usam overlay animations.

🎭 Tipos de Transicao

Fade

Pagina atual desaparece, nova aparece

Fade In/Out

Slide

Nova pagina desliza sobre a atual

Slide

Scale

Nova pagina cresce do centro

Morph

Elementos se transformam entre paginas

💻 View Transitions API

/* CSS: Definir transicao padrao */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.4s;
}
/* JS: Iniciar transicao */
document.startViewTransition(() => {
// Atualizar DOM
updateContent();
});
/* CSS: Animacao customizada */
::view-transition-new(root) {
animation: slideFromRight 0.4s ease-out;
}

* View Transitions API: Chrome 111+, Edge 111+.

Tecnica Tradicional (Overlay)

/* Overlay que cobre a tela */
.page-transition {
position: fixed;
inset: 0;
background: #111827;
transform: translateX(-100%);
transition: transform 0.5s ease-in-out;
}
.page-transition.active {
transform: translateX(0);
}

🎯 Vibe Coding Prompt

Use: View Transitions API para navegacao SPA, fade transition de 300-400ms entre paginas, shared element transitions para continuidade visual.

6

⚡ Performance

Animacoes devem rodar a 60fps para parecerem suaves. GPU acceleration e will-change sao essenciais para performance.

🚀 Propriedades GPU-Accelerated

✓ Animar (Rapido)

  • transform - translate, scale, rotate
  • opacity - transparencia
  • filter - blur, saturate

✗ Evitar (Lento)

  • width/height - causa reflow
  • top/left - use transform
  • margin/padding - causa reflow

💻 Usando will-change

/* Avisa o browser que vai animar */
.element {
will-change: transform, opacity;
}
/* CUIDADO: Use com moderacao! */
/* Aplicar apenas quando necessario */
.card:hover {
will-change: transform;
}
.card:not(:hover) {
will-change: auto;
}

Checklist de Performance

✓ Use transform ao inves de top/left
✓ Prefira opacity a visibility ou display
✓ Limite animacoes simultaneas (max 2-3 elementos)
✓ Use will-change apenas em elementos que realmente vao animar
✓ Pause animacoes fora da viewport
✓ Respeite prefers-reduced-motion para acessibilidade

♿ Acessibilidade: prefers-reduced-motion

Alguns usuarios preferem menos movimento (enjoo de movimento, distracoes). Respeite isso:

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

🎯 Vibe Coding Prompt

Use: apenas transform e opacity para animacoes, will-change em elementos com animacoes frequentes, prefers-reduced-motion para desativar animacoes para usuarios sensiveis.

📝 Resumo do Modulo

✓
Principios de Animacao - Os 12 principios da Disney aplicados a interfaces web
✓
CSS Animations - @keyframes e animation properties para movimento complexo
✓
Timing e Easing - cubic-bezier e timing functions para movimento natural
✓
Scroll Animations - Intersection Observer e scroll-driven para experiencias imersivas
✓
Page Transitions - View Transitions API e tecnicas de transicao entre paginas
✓
Performance - GPU acceleration, will-change e 60fps

Proximo Modulo:

2.6 - Design Systems: Componentes reutilizaveis e tokens de design

← Modulo Anterior Proximo Modulo →