Javascript-форум - Плавное увеличение значения progress

Добрый день. Использую библиотеку alpine.js, и хотел сделать плавное увеличение значения в теге <progress> при появлении элемента в области просмотра. Запуск анимации реализовал через IntersectionObserver. Прошу помощи с плавным увеличением значения, если возможно вместо setTimeout на requestAnimationFrame:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Progress</title>
	<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
	<script>
	document.addEventListener( 'alpine:init', () => {
		Alpine.data( 'progress', ( to, time, wait ) => ( {
			init() {
				let elem = this.$el;
				const observer = new IntersectionObserver( ( entries, imgObserver ) => {
					entries.forEach( ( entry ) => {
						console.log( entry );
						if ( entry.isIntersecting ) {
							var target   = entry.target,
								delay    = parseInt( wait ) || 100,
								duration = parseInt( time ) || 2000;
							if ( entry.intersectionRatio > 0 && !target.classList.contains( 'is-active' ) ) {
								target.classList.add( 'is-active' );
								setTimeout( () => {
									var start    = new Date().getTime();
									var interval = setInterval( function() {
										var progress = ( ( new Date().getTime() ) - start ) / duration,
											from     = target.getAttribute( 'value' ) || 0,
											result   = Math.floor( ( to - from ) * progress + from ),
											value    = progress < 1 ? result : to;

										console.log( value );

										elem.setAttribute( 'value', value );
										if ( value == to ) {
											clearInterval( interval );
										}
									}, 10 );
								}, delay );
								imgObserver.unobserve( target );
							}
					}
					} )
				} );
				observer.observe( elem );
			}
		} ) );
	} )
	</script>
</head>
<body>
	<progress class="progress" max="100" x-data="progress(100, 2000)"></progress>
</body>
</html>

В консоли когда проверяю, сейчас значения могут так идти: 1-1-2-3-4-4-4-5-4-5-6-7-8...