animation-timeline: como criar animações baseadas no scroll

A propriedade animation-timeline chegou chegando, ela simplifica drasticamente animações no scroll, tornando o código mais limpo e performático, ela nos permite controlar animações CSS diretamente através da posição de rolagem - sem • J a v a S c r i p t •

Como Funciona

Em vez de usar animation-duration, vinculamos a animação ao progresso do scroll:

div{
  animation: minhaAnimacao linear;
  animation-timeline: scroll();
}

Exemplos

1. Zoom Baseado no Scroll

div{
  animation: zoom linear;
  animation-timeline: view();
}

@keyframes zoom {
  from {
    scale: 0.8;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

2. Círculos Rotacionando

.circulo {
  animation: rotacao linear;
  animation-timeline: scroll(root);
}

@keyframes rotacao {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

3. Fade In/Out

.texto {
  animation: fade linear;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes fade {
  from {
    opacity: 0;
    translate: 0 50px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

Fallback para Firefox

O Firefox ainda não suporta animation-timeline nativamente. Use este fallback com JavaScript:

// Detecta suporte
if (!CSS.supports('animation-timeline: scroll()')) {
  // Implementação alternativa
  const elementos = document.querySelectorAll('.animado');
  
  window.addEventListener('scroll', () => {
    elementos.forEach(el => {
      const rect = el.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      const progress = Math.max(0, Math.min(1, 
        1 - rect.top / windowHeight
      ));
      
      // Aplica transformações manualmente
      el.style.opacity = progress;
      el.style.transform = `scale(${0.8 + progress * 0.2})`;
    });
  });
}