HTML Producer Test - Smooth Scroll - requestAnimationFrame()

#1
Hi guys,

First, I want to thanks mcdikki for his topic about HTML Producer Testing ;-) - A Scroll-Template for you
His topic is a very valuable source about the HTML Producer... As balte has pointed ;)
balte wrote:..... can I just note that the only documentation I have found on the HTML producer is this thread, and it even this is quite incomplete. .....
But, as mcdikki already pointed, there is some issue in his code that results to a non-smooth Scrolling...
mcdikki wrote:.....The missing smoothness of the scroll animation is something that drives me mad. I have no idea why it's not running smooth. Performance shouldn't be the problem. It's the same with Flash templates, it seems as I'm not able to get a smooth scroll. The other animations are fine, though.....
The problem seems to be the use of CSS3 transform ...

In the way that I understand it, the key of getting a smooth animation with the HTML producer is by using requestAnimationFrame()...

So I tried the following code:

Code: Select all

    <!DOCTYPE html>
    <html>
       <head>
          <title>HTML Template</title>
          <style type="text/css">
			 BODY {
				Font-Family: Verdana,Calibri,Arial;
				overflow: hidden;
				margin: 0px;
				}
			 #f0
				{
				position: absolute;
				margin-left: 0px;
				margin-top: 525px;
				overflow: hidden;
				visibility: hidden;
				height: auto;
				Width: auto;
				white-space: nowrap;
				font-Size: 20px;
				}
			 #r	{color: red;}
          </style>
       </head>
       <body onload="init()">
			<SCRIPT LANGUAGE="JavaScript">
			<!--
			
			function init() {
			my_width = document.getElementById("f0").clientWidth + 1;
			document.getElementById("f0").style.left = window.innerWidth + "px";
			document.getElementById("f0").style.visibility = "visible";
			start();
			}
			
			var requestId = 0;
			var my_pixels = 0;
			var my_pixel = 2;  // speed value
				
			function animate() {
				document.getElementById("f0").style.left = ((window.innerWidth) - my_pixels) + "px";
				my_pixels = my_pixels + my_pixel ;
				if ((my_width + window.innerWidth) <= my_pixels) {
					my_pixels = 0;
					document.getElementById("f0").style.left = ((window.innerWidth) + 1)  + "px";
					start();
					}else{
					if (stop_me_please != true) {requestId = window.requestAnimationFrame(animate);}
					}
				}
				
			function start() {
				stop();
				stop_me_please = false;
				requestId = window.requestAnimationFrame(animate);
				}
				
			function stop() {
				if (requestId)
				window.cancelAnimationFrame(requestId);
				stop_me_please = true;
				requestId = 0;
				}
			//-->
			</SCRIPT>
			
          <div id="f0"><b>CasparCG</b>&nbsp;&nbsp;&nbsp;is a professional graphics and video play-out software, proven in 24/7 broadcasts since <b id="r">2006</b></div>
	  </body>
    </html>
And it seems to be perfectly smooth :)

I hope it help.
Any advice is welcome of course...

HTML Producer Test - requestAnimationFrame() Memory Leak !!!

#3
Hi all,

So using requestAnimationFrame() it's great...
But after a few days trying a template like the one above or the one from vimlesh1975, I noticed a problem of memory leak.
You can see it on the third CasparCG process in the attached file.

After googling, it seems to be an old chromium issue that has not been resolved yet:
https://code.google.com/p/chromium/issu ... ?id=120186
Attachments
CasparCG_Process.png
CasparCG_Process.png (94.49 KiB) Viewed 3577 times