Como ativar animações durante o scroll com JavaScript puro

Há algum tempo vinha pesquisando uma maneira de implementar animações em CSS ativadas durante o scroll da página no site usando JavaScript. A ideia foi usar animações simples, seguindo a linha minimalista.

Uma das alternativas era utilizar bibliotecas de animação. No entanto, não fazia sentido sacrificar o tempo de carregamento da página com os arquivos da biblioteca para animações simples.

Encontrei no IntersectionObserver uma alternativa em poucas linhas de código e ainda mais eficiente do que usar um EventListener. Ela é usada principalmente na homepage do site.

A API Intersection Observer fornece uma maneira de observar as alterações de forma assíncrona na interseção de um elemento de destino com um elemento pai ou o viewport da página.

Ou seja, ao invés de observar a rolagem da página, o recurso pode ser usado para observar se algo está atualmente visível na página. A implantação é simples:

function scrollTrigger(selector, animation, options = { threshold: 0.1 }){
    let els = document.querySelectorAll(selector);
    els = Array.from(els);
    els.forEach(el => {
        addObserver(el, animation, options);
    })
}

function addObserver(el, animation, options){
    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting){
                entry.target.removeAttribute('style');
                entry.target.classList.add(animation);
                observer.unobserve(entry.target);
            } else if (!entry.isVisible) {
                entry.target.style.opacity = '0';
            }
        })
    }, options);
    observer.observe(el);
}

Entendendo o código JavaScript

A scrollTrigger é a função que chamaremos para cada animação ativada por scroll. Ela recebe como parâmetro as variáveis:

• selector: os seletores CSS que serão animados. Pode ser um seletor ou vários, separados por vírgulas.
• animation: a classe CSS com a animação a ser aplicada.
• options: opções da API IntersectionObserver. Neste caso, queremos que a animação seja aplicada quando 10% do elemento for visível na página. Veja as opções na documentação disponível no MDN.

A função busca pelo seletor CSS e coloca os resultados em um array, e para cada elemento encontrado chama a função addObserver, que criará o observador de interseção.

No exemplo acima, se o elemento a ser animado não estiver oculto pelo CSS e se não estiver ao menos 10% visível na página, ele terá o atributo style adicionado definindo a opacidade em 0%.

Quando o elemento entrar no viewport e pelo menos 10% do conteúdo for visível, a API IntersectionObserver remove o atributo style adicionado anteriormente, e adiciona a classe com a animação.

Após isso, como a intenção é ativar a animação apenas uma vez, o script remove o elemento do observador, para evitar que a animação seja ativada novamente.