Как можно реализовать плавную анимацию при изменении значений с помощью JavaScript?

Для реализации плавной анимации при изменении значений с помощью JavaScript можно использовать CSS transitions или JavaScript библиотеки, такие как jQuery или GSAP.

1. CSS transitions:
- Создайте класс с анимацией в CSS, например:
```
.animation {
  transition: property duration timing-function delay;
}
```
где property - свойство, которое нужно анимировать (например, `opacity` или `transform`), duration - время анимации в миллисекундах, timing-function - функция времени (например, `linear`, `ease-in`, `ease-out`, `ease-in-out`), delay - задержка перед началом анимации.
- Добавьте этот класс к элементу:
```
element.classList.add('animation');
```
- Измените значение свойства элемента, чтобы началась анимация:
```
element.style.property = 'new value';
```

2. JavaScript библиотеки:
- Если вы используете jQuery, вы можете использовать методы `animate()` или `fadeIn()/fadeOut()` для плавной анимации значений элемента.
- Если вы используете GSAP, вы можете использовать его мощные методы анимации, такие как `to()`, `from()`, `fromTo()`, чтобы создать плавную анимацию при изменении значений элементов.

Чтобы исправить проблему, когда анимация срабатывает плавно только после загрузки страницы, но не при смене значений через JavaScript, вы можете выполнить следующие действия:
- Убедитесь, что код изменения значений элемента находится внутри функции `DOMContentLoaded`, чтобы он выполнялся только после полной загрузки DOM.
```
document.addEventListener('DOMContentLoaded', function() {
  // ваш код изменения значений элемента
});
```
- Добавьте класс с анимацией к элементу перед изменением его значений.
- Используйте `setTimeout` или `requestAnimationFrame`, чтобы позволить браузеру выполнить рендеринг изменений стилей перед удалением класса с анимацией.
```
setTimeout(function() {
  // удаление класса с анимацией
}, 100);
```
- Если используете CSS transitions, убедитесь, что значение, которое вы изменяете, не задано в CSS стилях. Это позволит транзиции работать правильно при изменении значения через JavaScript.
- Если используете JavaScript библиотеки для анимации, проверьте, что их методы вызываются после изменения значений элемента.

Вероятно вам нужен обычный transition , он будет срабатывать каждый раз, когда значения будут меняться: 
 
 
.items {
    .single-chart {
        .circular-chart {
            .circle {
                /* animation: progress 1s ease-out forwards; */
                transition: stroke-dasharray 1s ease-out;
            }
        }
    }
}