Velocity.js는 JavaScript로 요소를 애니메이션화하는 강력한 라이브러리입니다. 요소의 애니메이션이 실행되는 동안에 해당 애니메이션의 진행 상태를 실시간으로 확인하고자 한다면, 다음과 같은 방법으로 할 수 있습니다.

1. Promise 또는 Callback 함수 사용: Velocity.js는 Promise와 Callback 함수를 지원하므로, 애니메이션이 시작되거나 완료될 때 콜백 함수를 실행할 수 있습니다. 이 콜백 함수를 이용하여 애니메이션의 진행 상태를 확인할 수 있습니다.

    // Promise를 이용한 방법
    Velocity(el, { opacity: 1 }, { duration: 1000 }).then(function(elements) {
      console.log("애니메이션이 완료되었습니다.");
    });
   
    // Callback 함수를 이용한 방법
    Velocity(el, { opacity: 1 }, { duration: 1000, complete: function() {
      console.log("애니메이션이 완료되었습니다.");
    }});
   

2. 진행 중인 애니메이션 상태 확인: Velocity.js는 애니메이션이 실행 중일 때 요소의 velocity 속성을 통해 현재 애니메이션 상태를 확인할 수 있습니다.

    var animationStatus = el.velocity("isTweening");
    if (animationStatus) {
      console.log("애니메이션이 진행 중입니다.");
    } else {
      console.log("애니메이션이 진행 중이 아닙니다.");
    }
   

Velocity.js를 사용하여 요소의 애니메이션 진행 상태를 확인하는 방법을 통해 더욱 유연하고 동적인 웹 애니메이션을 구현할 수 있습니다.

더 많은 정보를 원하시면 Velocity.js 공식 문서를 참고하실 수 있습니다.