검은색 영역 애니메이션이 움직이지 않습니다.

안녕하세요 강의 잘 듣고 있습니다. 제가 강의를 보면서 따라하던 도중 이상하게 검은색 박스는 생기지만 옆으로 움직이면서 서서히 사라지는 부분이 안 됌니다. 그런데 아무리 찾아보아도 문제의 원인을 모르겠습니다.(제가 변수의 이름을 제가 알기 쉽게 바꾼게 몇개 존재합니다.)

(() => {
  let yoffset = 0;
  let prevScrollHeight = 0;//이전 스크롤 섹션의 높이를 담음
  let currentScene = 0 //현재 활성화된 씬
  let enterScene = false;
  const sectionInfo = [
    //0
    {
      type : 'sticky',
      heightNum : 5,
      height : 0,
      objs : {
        section : document.querySelector('#scroll-section-1'),
        MessageA : document.querySelector('#scroll-section-1 .main-message.a'),
        MessageB : document.querySelector('#scroll-section-1 .main-message.b'),
        MessageC : document.querySelector('#scroll-section-1 .main-message.c'),
        MessageD : document.querySelector('#scroll-section-1 .main-message.d'),
        canvas : document.querySelector('#scroll-section-1 #first_canvas'),
        ctx : document.querySelector('#scroll-section-1 #first_canvas').getContext('2d'),
      },
      values : {
        //비디오 정보
        img_values : 300,
        img_obj : [],
        imgeSequence : [0,300],
        canvas_opacity : [1,0,{start : 0.9, end : 1}],
        //투명도 조절
        messageA_fade_in : [0,1,{start : 0.1, end : 0.2}],
        messageB_fade_in : [0,1,{start : 0.3, end : 0.4}],
        messageC_fade_in : [0,1,{start : 0.5, end : 0.6}],
        messageA_fade_out : [1,0,{start : 0.25, end : 0.3}],
        messageB_fade_out : [1,0,{start : 0.45, end : 0.5}],
        messageC_fade_out : [1,0,{start : 0.65, end : 0.7}],
        //transform 조절
        messageA_transform_in : [20,0,{start: 0.1, end : 0.2}],
        messageB_transform_in : [20,0,{start: 0.3, end : 0.4}],
        messageC_transform_in : [20,0,{start: 0.5, end : 0.6}],
        messageA_transform_out : [0,-20,{start: 0.25, end : 0.3}],
        messageB_transform_out : [0,-20,{start: 0.45, end : 0.5}],
        messageC_transform_out : [0,-20,{start: 0.65, end : 0.7}],
      }
    },
    //1
    {
      type : 'normal',
      heightNum : 5,
      height : 0,
      objs : {
        section : document.querySelector('#scroll-section-2'),
      },
      values : {

      }
    },
    //2
    {
      type : 'sticky',
      heightNum : 5,
      height : 0,
      objs : {
        section : document.querySelector('#scroll-section-3'),
        desc_messageA: document.querySelector('#scroll-section-3 .desc-message.a'),
        desc_messageB : document.querySelector('#scroll-section-3 .desc-message.b'),
        desc_messageC : document.querySelector('#scroll-section-3 .desc-message.c'),
        canvas : document.querySelector('#scroll-section-3 #second_canvas'),
        ctx : document.querySelector('#scroll-section-3 #second_canvas').getContext('2d'),
      },
      values : {
        img_values : 960,
        img_obj : [],
        imgeSequence : [0,960],
        canvas_fade_in : [0,1, {start : 0.05, end : 0.1}],
        canvas_fade_out : [1,0, {start : 0.9, end : 1}],
        //투명도
        desc_messageA_fade_in : [0 , 1, {start : 0.1, end : 0.2}],
        desc_messageB_fade_in : [0 , 1, {start : 0.3, end : 0.4}],
        desc_messageC_fade_in : [0 , 1, {start : 0.5, end : 0.6}],
        desc_messageA_fade_out : [1 , 0, {start : 0.25, end : 0.3}],
        desc_messageB_fade_out : [1 , 0, {start : 0.45, end : 0.5}],
        desc_messageC_fade_out : [1 , 0, {start : 0.65, end : 0.7}],
        //transform 조절
        desc_messageA_transform_in : [20,0,{start : 0.1, end : 0.2}],
        desc_messageB_transform_in : [20,0,{start : 0.3, end : 0.4}],
        desc_messageC_transform_in : [20,0,{start : 0.5, end : 0.6}],
        desc_messageA_transform_out : [0,-20,{start : 0.25, end : 0.3}],
        desc_messageB_transform_out : [0,-20,{start : 0.45, end : 0.5}],
        desc_messageC_transform_out : [0,-20,{start : 0.65, end : 0.7}],
      }
    },
    //3
    {
      type : 'sticky',
      heightNum : 5,
      height : 0,
      objs : {
        section : document.querySelector('#scroll-section-4'),
        mainMessageA : document.querySelector('mid-message.a'),
        canvas : document.querySelector('#third_canvas'),
        ctx : document.querySelector('#third_canvas').getContext('2d'),
      },
      values : {
        imgsrc : [
          './images/blend-image-1.jpg',
          './images/blend-image-2.jpg'
        ],
        discrimination : 0,
        img_obj : [],
        recet1X : [0,0, {start: 0, end: 0}],
        recet2X : [0,0, {start: 0, end: 0}],
        rectscrollY : 0,
      }
    }
  ]
  function setHeight() {
    yoffset = window.pageYOffset;
    let totalHeight = 0; //각 섹션별 높이를 전부 담는 변수
    const canvasRatio = window.innerHeight / 1080; //마지막 캔버스를 제외한 나머지 캔버스의 비율
    for(let i = 0; i < sectionInfo.length; i++){
      let sectionNum = sectionInfo[i];
      let calcHeight = 0;
      if( sectionNum.type === 'sticky' ){
        calcHeight = window.innerHeight *  sectionNum.heightNum;
        sectionNum.height = calcHeight;
        sectionNum.objs.section.style.height = `${calcHeight}px`
      }else{
        calcHeight = sectionInfo[i].objs.section.offsetHeight;
        sectionNum.height = calcHeight;
      }
      sectionNum.objs.section.style.height = `${calcHeight}px`
    }

    for(let i = 0; i < sectionInfo.length; i++){
      totalHeight += sectionInfo[i].height;
      if( totalHeight >=  window.pageYOffset){
        currentScene = i;
        break;
      }
    }
    

    sectionInfo[0].objs.canvas.style.transform = `translate3d(-50%,-50%,0) scale(${canvasRatio})`;
    sectionInfo[2].objs.canvas.style.transform = `translate3d(-50%,-50%,0) scale(${canvasRatio})`;
    document.body.id = `show-scene-${currentScene}`;
  }

  function setCanvasImage() {
    let imgElem;
    let imgElem2;
    let imgElem3;
    for (let i = 0; i < sectionInfo[0].values.img_values; i++){
      imgElem = new Image();
      imgElem.src = `./video/001/IMG_${6726 + i}.jpg`;
      sectionInfo[0].values.img_obj.push(imgElem);
    }

    for (let i = 0; i < sectionInfo[2].values.img_values; i++){
      imgElem2 = new Image();
      imgElem2.src = `./video/002/IMG_${7027 + i}.jpg`;
      sectionInfo[2].values.img_obj.push(imgElem2);
    }

    for (let i = 0; i < sectionInfo[3].values.imgsrc.length; i++){
      imgElem3 = new Image();
      imgElem3.src = sectionInfo[3].values.imgsrc[i];
      sectionInfo[3].values.img_obj.push(imgElem3);
    }
  } 
  setCanvasImage();


  function scrollLoop() {
    enterScene = false;
    prevScrollHeight = 0;
    for(let i = 0; i < currentScene; i++){
      prevScrollHeight += sectionInfo[i].height;
    }

    if(yoffset > prevScrollHeight + sectionInfo[currentScene].height){
      enterScene = true;
      currentScene++;
      document.body.id = `show-scene-${currentScene}`;
    }
    if ( yoffset < prevScrollHeight ){
      if(yoffset < 0) return;
      enterScene = true;
      currentScene--;
      document.body.id = `show-scene-${currentScene}`;
    }
    if ( enterScene ) return;
    playAnimation();
  }


  //애니메이션 처리 값과 현재 씬에서의 스크롤 비율을 넘겨받음
  function calcValues(values,currentYoffset){
    let rv;//값을 계산해 리턴해줄 변수
    const scrollHeight = sectionInfo[currentScene].height;
    const scrollRatio = currentYoffset / sectionInfo[currentScene].height;//현재씬의 스크롤 비율
    
    if ( values.length === 3 ){
      //start ~ end 사이의 애니메이션 실행
      const partScrollStart = values[2].start * scrollHeight;
      const partScrollEnd = values[2].end * scrollHeight;
      const partScrollHeight = partScrollEnd - partScrollStart;
      if( currentYoffset >= partScrollStart && currentYoffset <= partScrollEnd ){
        rv = (currentYoffset - partScrollStart) / partScrollHeight * (values[1] - values[0] ) + values[0];
      }else if(currentYoffset < partScrollStart){
        rv = values[0]
      }
      else if ( currentYoffset > partScrollEnd ){
        rv = values[1];
      }
    }else{
      rv = scrollRatio * (values[1] - values[0] ) + values[0];
    }



    return rv;
  }

  function playAnimation() {
    const objs = sectionInfo[currentScene].objs;
    const values = sectionInfo[currentScene].values;
    const currentYoffset = yoffset - prevScrollHeight;
    const scrollHeight = sectionInfo[currentScene].height;
    const scrollRatio = currentYoffset / scrollHeight;

    switch(currentScene){
      case 0:
       if ( scrollRatio <= 0.22 ){
        objs.MessageA.style.opacity = calcValues(values.messageA_fade_in,currentYoffset);
        objs.MessageA.style.transform = `translateY(${calcValues(values.messageA_transform_in,currentYoffset)}%)`;
       }
       else{
         objs.MessageA.style.opacity = calcValues(values.messageA_fade_out,currentYoffset);
         objs.MessageA.style.transform = `translateY(${calcValues(values.messageA_transform_out,currentYoffset)}%)`;
       }
       if(scrollRatio < 0.43){
          objs.MessageB.style.opacity = calcValues(values.messageB_fade_in,currentYoffset);
          objs.MessageB.style.transform = `translateY(${calcValues(values.messageB_transform_in,currentYoffset)}%)`;
       }else{
          objs.MessageB.style.opacity = calcValues(values.messageB_fade_out,currentYoffset);
          objs.MessageB.style.transform = `translateY(${calcValues(values.messageB_transform_out,currentYoffset)}%)`;
       }
       if( scrollRatio < 0.63 ){
          objs.MessageC.style.opacity = calcValues(values.messageC_fade_in,currentYoffset);
          objs.MessageC.style.transform = `translateY(${calcValues(values.messageC_transform_in,currentYoffset)}%)`;
       }else{
          objs.MessageC.style.opacity = calcValues(values.messageC_fade_out,currentYoffset);
          objs.MessageC.style.transform = `translateY(${calcValues(values.messageC_transform_out,currentYoffset)}%)`;
       }
       let imgeSequence = Math.floor(calcValues(sectionInfo[0].values.imgeSequence,currentYoffset));
       objs.ctx.drawImage(values.img_obj[imgeSequence],0,0);
       objs.canvas.style.opacity = calcValues(values.canvas_opacity,currentYoffset);
        break;
      case 1:
        break;
      case 2:
        if( scrollRatio <=  0.22 ){
         objs.desc_messageA.style.opacity = calcValues(values.desc_messageA_fade_in,currentYoffset);
         objs.desc_messageA.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageA_transform_in,currentYoffset)}%, 0)`;
        }
        else{
          objs.desc_messageA.style.opacity = calcValues(values.desc_messageA_fade_out,currentYoffset);
          objs.desc_messageA.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageA_transform_out,currentYoffset)}%, 0)`;
        }
        if ( scrollRatio < 0.42 ){
          objs.desc_messageB.style.opacity = calcValues(values.desc_messageB_fade_in,currentYoffset);
          objs.desc_messageB.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageB_transform_in,currentYoffset)}%, 0)`;
        }else{
          objs.desc_messageB.style.opacity = calcValues(values.desc_messageB_fade_out,currentYoffset);
          objs.desc_messageB.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageB_transform_out,currentYoffset)}%, 0)`;
        }
        if ( scrollRatio < 0.62 ){
          objs.desc_messageC.style.opacity = calcValues(values.desc_messageC_fade_in,currentYoffset);
          objs.desc_messageC.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageC_transform_in,currentYoffset)}%, 0)`;
        }else{
          objs.desc_messageC.style.opacity = calcValues(values.desc_messageC_fade_out,currentYoffset);
          objs.desc_messageC.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageC_transform_out,currentYoffset)}%, 0)`;
        }
        if(scrollRatio < 0.5){
          objs.canvas.style.opacity = calcValues(values.canvas_fade_in,currentYoffset);
        }else{
          objs.canvas.style.opacity = calcValues(values.canvas_fade_out,currentYoffset);
        }
        let imageSequence2 = Math.floor(calcValues(values.imgeSequence,currentYoffset));
        objs.ctx.drawImage(values.img_obj[imageSequence2],0,0);
        break;
      case 3:
        const widthRatio = window.innerWidth / objs.canvas.width;
        const heightRatio = window.innerHeight / objs.canvas.height;
        if ( widthRatio <= heightRatio ){
          objs.canvas.style.transform = `scale(${heightRatio})`;
        }else{
          objs.canvas.style.transform = `scale(${widthRatio})`;
        }
        const newWidth = document.body.offsetWidth / widthRatio//안쪽의 content영역의 width값을 구하기 위한 계산
        const newheight = window.innerHeight / heightRatio//안쪽의 content영역의 높이를 구하기 위한 계산
        const blockArea = newWidth * 0.15;
        values.recet1X[0] = (objs.canvas.width - newWidth) / 2; // 애니메이션 시작 지점을 계산
        values.recet1X[1] = values.recet1X[0] - blockArea;//애니메이션 끝 지점을 계산
        values.recet2X[0] = (values.recet1X[0] + newWidth) - blockArea; // 오른쪽 블록의 애니메이션 시작지점을 계산
        values.recet2X[1] = values.recet2X[1] + blockArea//오른쪽 애니메이션의 끝 지점을 지정
        if(!values.rectscrollY){
          values.rectscrollY = objs.canvas.getBoundingClientRect().top;
          values.recet1X[2].end = values.rectscrollY / scrollHeight;
          values.recet2X[2].end = values.rectscrollY / scrollHeight;
        }
        objs.ctx.fillRect(
					parseInt(calcValues(values.recet1X, currentYoffset)),
					0,
					parseInt(blockArea),
					objs.canvas.height
				);
				objs.ctx.fillRect(
					parseInt(calcValues(values.recet2X, currentYoffset)),
					0,
					parseInt(blockArea),
					objs.canvas.height
				);
        break;
    }
  }

  window.addEventListener('resize',setHeight);
  window.addEventListener('scroll',() => {
    yoffset = window.pageYOffset;
    scrollLoop()
  });
  window.addEventListener('load',() => {
    setHeight();
    sectionInfo[0].objs.ctx.drawImage(sectionInfo[0].values.img_obj[0],0,0);
    sectionInfo[3].objs.ctx.drawImage(sectionInfo[3].values.img_obj[0],0,0);
  });
})();