Como ativar animações durante o scroll com JavaScript sem bibliotecas

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

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 na API IntersectionObserver uma alternativa em poucas linhas de código. Ela 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.