Как поправить анимацию числа на js?

Question

[msdoc11]

Этот код в самом верху

let currentDataSum = null;
let duration = 4000;

Данный код вызывается каждые 15 сек для проверки изменения числа

var dataSum = data.test; Вытаскиваю с апи нужное число
 if (currentDataSum !== dataSum) {
      animateNumber(currentDataSum, dataSum, duration);
      currentDataSum = dataSum;
}

Сам код анимации. Так же там добавляется активный класс для дополнительной анимации в css, пока что происходит анимация на js

function animateNumber(start, end, duration) {
            const increment = (end - start) / (duration / 16);

            let current = start;
            const animation = setInterval(() => {
                current += increment;
                element.innerHTML = Math.floor(current);
                if (current >= end) {
                    clearInterval(animation);
                    element.innerHTML = end;
                    elementClass.classList.remove("active");
                } else {
                    elementClass.classList.add("active");
                }
            }, 16);
        }

Анимация срабатывает только кода новое число больше предыдущего, но если меньше, то анимации нет и происходит просто резкая замена числа. Как исправить?

Comments

[Александр]

Попробуйте сменить знак у increment в зависимости от того, увеличивается или уменьшается число:

const increment = (end - start) / (duration / 16) * (start < end ? 1 : -1);

Ну и в условии проверки в функции animateNumber, измените условие на:

if (increment > 0 ? current >= end : current <= end) {