Как использовать requestAnimationFrame

var el = document.getElementById("first"); 
var elem = document.getElementById("second"); 
 
function animate({timing, draw, duration}) { 
 
	let start = performance.now(); 
 
	requestAnimationFrame(function animate(time) { 
		let timeFraction = (time - start) / duration; 
		if (timeFraction > 1) { 
			timeFraction = 1; 
		} 
		let progress = timing(timeFraction); 
		draw(progress); 
		if (timeFraction < 1) { 
			requestAnimationFrame(animate); 
		} 
	}); 
} 
 
window.addEventListener('click', () => { 
	animate({ 
        duration: 1000, 
        timing: function(timeFraction) { 
         	return timeFraction; 
        }, 
        draw: function(progress) { 
        	if (elem.style.top == (100 + 'px') || num == 1) { 
        		var num = 1; 
        		elem.style.top = progress * 0 + 'px'; 
        	} else { 
        		elem.style.top = progress * 100 + 'px'; 
        	} 
        	 
        } 
     }); 
});

body { 
	margin: 0; 
} 
 
#first, #second { 
	width: 100px; 
	height: 100px; 
	position: relative; 
	border-radius: 50%; 
	background-color: red; 
} 
 
#second { 
	background-color: green; 
}

<div id="first"></div> 
<div id="second"></div>