como faz isso sem o framework??

olá, eu gostaria de saber como mudar o atributo do filtro svg com um @keyframes sem o framework feito no vídeo.

eu tentei fazer mais não sei se ficou igual o vídeo

meu arquivo script.js:

import { Cards } from './Cards.js';
import { LetterFooter } from './LetterFooter.js';

window.onload = () => {
    const animationCards = new Cards();
    document.addEventListener('scroll', animationCards.scrollCards.bind(animationCards));

    const lettFooter = new LetterFooter();
    setInterval(() => {
        lettFooter.animatinInMove();
    },500)
}

meu arquivo LetterFotter.js:

export class LetterFooter {
    constructor() {
        this.svg = document.querySelector('.lett__footer');
        this.filter = document.querySelector('#filter-turbulence');
        this.is = 1;
    }

    animationInMove() {
        if (this.is == 1) {
            this.filter.attributes[2].value = "0.04";
            this.is = 2;
        } else if (this.is == 2) {
            this.is = 3;
            this.filter.attributes[2].value = "0.03";
        } else if (this.is == 3) {
            this.is = 4;
            this.filter.attributes[2].value = "0.02";
        } else {
            this.is = 1;
            this.filter.attributes[2].value = "0.05";
        }

    }
}

eu sei que eu poderia usar o switch no lugar do if e eslse if e else