Design e UX · 2025-01-09

Animações de Entrada para Sites Modernos: Guia Prático

Aprenda a criar animações de entrada elegantes que encantam visitantes sem prejudicar a performance.

Artigo do acervo, publicado em 2025-01-09. Valores, ferramentas e condições devem ser conferidos nas fontes atuais. Exemplos não constituem promessa de resultado da Suprema.

Animações Web: Encante Sem Prejudicar

Animações bem feitas elevam a experiência. Mal feitas, destroem.

Tipos de Animações de Entrada

1. Fade In

Simples e elegante. O elemento aparece suavemente.

2. Slide In

Elemento desliza de uma direção (cima, baixo, lados).

3. Scale

Elemento cresce de pequeno para tamanho normal.

4. Reveal

Conteúdo é revelado progressivamente.

5. Stagger

Múltiplos elementos entram em sequência.

Implementação com CSS

.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.6s ease forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Implementação com JavaScript

Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

document.querySelectorAll('.animate').forEach(el => observer.observe(el));

Bibliotecas Recomendadas

1. GSAP: Mais poderosa
2. Framer Motion: React
3. AOS: Simples e eficaz
4. Animate.css: Apenas CSS
5. Lottie: Animações After Effects

Boas Práticas

✅ Animações curtas (0.3-0.6s) ✅ Easing natural ✅ Propósito claro ✅ Respeitar prefers-reduced-motion ✅ Não bloquear conteúdo

Erros Comuns

❌ Animações muito longas ❌ Delays excessivos ❌ Tudo animando junto ❌ Loops infinitos em CTAs ❌ Ignorar performance

Conclusão

Animações são tempero: na medida certa, realçam. Em excesso, estragam.