domasx2/testgsapfps.html

## testgsapfps.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
	background: white;
}

.ok  {
	color: green;
}

.not-ok {
	color: red;
}

</style>
</head>
<body>
<p>GSAP FPS: <span id="gsap">Wait...</span></p>
<p>Reference FPS: <span id="reference">Wait...</span></p>
<p id="result"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script>
var start = new Date().getTime(), gsap_calls = 0, ref_calls = 0, gsap_fps, ref_fps;


// calculate GSAP fps by creating a tween that is supposed to update 100 times
function onComplete() {
  document.getElementById('gsap').innerHTML  = gsap_fps = Math.floor(gsap_calls /  (((new Date().getTime()) - start) / 1000));
  setResult();
}

function onUpdate() {
  gsap_calls++;
}

TweenMax.to({}, 100, {
  useFrames: true,
  onComplete: onComplete,
  onUpdate: onUpdate
});

//calculate reference fps by looping RAF 100 times
function refCall() {
	ref_calls ++;
	if (ref_calls === 100) {
		document.getElementById('reference').innerHTML  = ref_fps =  Math.floor(ref_calls /  (((new Date().getTime()) - start) / 1000));
		setResult();
	} else {
		window.requestAnimationFrame(refCall);
	}
}

window.requestAnimationFrame(refCall);

function setResult() {
	if (gsap_fps && ref_fps) {
		var res_el = document.getElementById('result');
		if (gsap_fps === ref_fps) {
			res_el.innerHTML = 'OK :)';
			res_el.className = 'ok';
		} else {
			res_el.innerHTML = 'Not OK :(';
			res_el.className = 'not-ok';
		}
	}
}

</script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	background: white;
	}

	.ok {
	color: green;
	}

	.not-ok {
	color: red;
	}

	</style>
	</head>
	<body>
	<p>GSAP FPS: <span id="gsap">Wait...</span></p>
	<p>Reference FPS: <span id="reference">Wait...</span></p>
	<p id="result"></p>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
	<script>
	var start = new Date().getTime(), gsap_calls = 0, ref_calls = 0, gsap_fps, ref_fps;


	// calculate GSAP fps by creating a tween that is supposed to update 100 times
	function onComplete() {
	document.getElementById('gsap').innerHTML = gsap_fps = Math.floor(gsap_calls / (((new Date().getTime()) - start) / 1000));
	setResult();
	}

	function onUpdate() {
	gsap_calls++;
	}

	TweenMax.to({}, 100, {
	useFrames: true,
	onComplete: onComplete,
	onUpdate: onUpdate
	});

	//calculate reference fps by looping RAF 100 times
	function refCall() {
	ref_calls ++;
	if (ref_calls === 100) {
	document.getElementById('reference').innerHTML = ref_fps = Math.floor(ref_calls / (((new Date().getTime()) - start) / 1000));
	setResult();
	} else {
	window.requestAnimationFrame(refCall);
	}
	}

	window.requestAnimationFrame(refCall);

	function setResult() {
	if (gsap_fps && ref_fps) {
	var res_el = document.getElementById('result');
	if (gsap_fps === ref_fps) {
	res_el.innerHTML = 'OK :)';
	res_el.className = 'ok';
	} else {
	res_el.innerHTML = 'Not OK :(';
	res_el.className = 'not-ok';
	}
	}
	}

	</script>
	</body>

	</html>