새 애니메이션이 작동하지 않습니다.

(()=>{

    const actions = {
        birdFlies(key) {
            if(key){
                document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(${window.innerWidth}px)';
            }
            else{
                document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(-100%)';
            }

        },

        birdFlies2(key) {
            if(key){
                document.querySelector('[data-index="5"] .bird').style.transform = 'translateX(${window.innerWidth}px, ${-window.innerHeight * 0.7}px)';
            }
            else{
                document.querySelector('[data-index="5"] .bird').style.transform = 'translateX(-100%)';
            }

        }
    };

    const stepElems = document.querySelectorAll('.step');
    const graphicElems = document.querySelectorAll('.graphic-item');
    let currentItem=graphicElems[0]; //현재 활성화된 (visible 클래스가 붙은) .graphic-item을 지정
    let ioIndex;

    const io = new IntersectionObserver((entries, observer) => {
        ioIndex = entries[0].target.dataset.index*1; //숫자로 변환
    });

    for(let i=0; i<stepElems.length; i++){
        io.observe(stepElems[i]);
        stepElems[i].dataset.index = i;
        graphicElems[i].dataset.index = i;
    }

    function activate(action){
        currentItem.classList.add('visible');
        if(action){
            actions[action](true);
        }
    }

    function inactivate(action){
        currentItem.classList.remove('visible');
        if(action){
            actions[action](false);
        }
    }

    addEventListener('scroll', ()=>{
        let step;
        let boundingRect;

        for (let i = ioIndex-1; i < ioIndex+2; i++){
            step = stepElems[i];
            if(!step) continue;
            boundingRect = step.getBoundingClientRect();

            if(boundingRect.top > window.innerHeight * 0.1 && boundingRect.top < window.innerHeight * 0.8){

                if(currentItem){
                    inactivate();
                }

                currentItem = graphicElems[step.dataset.index];
                activate(currentItem.dataset.action);
            }
        }

    })

    activate();

})();
일단 콘솔 오류창에서 아무 오류도 안나는데 새 애니메이션이 전혀 작동하지 않습니다.
CSS도 따라 써보고 오타 있는지 확인해봐도 움직이지 않네요

인프런 커뮤니티 질문&답변