Depois de fazer vários testes e usar bastante o modo desenvolvedor (F12) do navegador, com muitos console.log para obter as informações necessárias, consegui criar um código mais enxuto, onde faço um array de observadores e, com forEach, if, else e for, construo um código com o menor número de linhas possível.
JS:
const observador = new IntersectionObserver((e) => {
//primeiro for each é as animaçoes do banner, como é uma array de 3 section o if ve se o elemento esta na tela e verifica se o elemento é o que tem a classe name banner(section)
e.forEach((e => {
if (e.isIntersecting && e.target.classList.value === "banner") {
e.target.children[0].classList.add('animacao');
e.target.children[1].classList.add('animacao-2');
e.target.children[2].classList.add('animacao-3');
e.target.children[3].classList.add('animacao-4');
} else {
e.target.children[0].classList.remove('animacao');
e.target.children[1].classList.remove('animacao-2');
e.target.children[2].classList.remove('animacao-3');
e.target.children[3].classList.remove('animacao-4');
}
//segundo for each é os botões da categoria, como é uma array de 3 section o if ve se o elemento esta na tela e verifica se o elemento é o que tem a classe name categorias__lista(Ul)
if (e.target.classList.value === "categorias__lista" && e.isIntersecting) {
//para não ter repetições de codigos, temos um for, para passar em todos os arrays de informações, e colocando e retirando as classes automaticamente
for (i = 0; i < e.target.children.length; i++) {
if (i <= 3) {
e.target.children[i].classList.add('animacao-botao-esquerdos');
} else {
e.target.children[i].classList.add('animacao-botao-direitos');
}
}
} else {
for (i = 0; i < e.target.children.length; i++) {
if (i <= 3) {
e.target.children[i].classList.remove('animacao-botao-esquerdos');
} else {
e.target.children[i].classList.remove('animacao-botao-direitos');
}
}
}
//terceiro for each é a mesma teoria do segundo, só com mais if pois as classes adicionadas não esta em ordem, e sim a cada par. (Ul eventos__lista)
if (e.target.classList.value === "eventos__lista" && e.isIntersecting) {
for (i = 0; i < e.target.children.length; i++) {
if (i <= 1) {
e.target.children[i].classList.add('card-esquerda');
}
if (i >= 2 && i <= 3) {
e.target.children[i].classList.add('card-direita');
}
if (i >= 4 && i <= 5) {
e.target.children[i].classList.add('card-esquerda');
}
if (i >= 6 && i <= 7) {
e.target.children[i].classList.add('card-direita');
}
}
}else {
for (i = 0; i < e.target.children.length; i++) {
if (i <= 1) {
e.target.children[i].classList.remove('card-esquerda');
}
if (i >= 2 && i <= 3) {
e.target.children[i].classList.remove('card-direita');
}
if (i >= 4 && i <= 5) {
e.target.children[i].classList.remove('card-esquerda');
}
if (i >= 6 && i <= 7) {
e.target.children[i].classList.remove('card-direita');
}
}
}
}))
})
// variavel que pega os 3 datas-atributes fazendo uma array (assim nao precisa criar 3 conts diferentes para o observador)
const animacao = document.querySelectorAll('[data-animacao]')
animacao.forEach((e) => {
observador.observe(e);
})
Se tiverem mais alguma dica, para deixar o código ainda melhor, mandam para mim :D