Raphaël JavaScript Test

I ran across http://raphaeljs.com and it looked very appealing/impressive, so I thought I’d try it out. Raphaël is a JavaScript Vector Library that allows cross-browser drawing and animation of vector shapes dead simple. All you need to do to use it is to reference the raphael.js file in the head section of your HTML document (having the excanvas.js helps too).

Here is how I animated my header logo:

 <script type="text/javascript" charset="utf-8">
	window.onload = function() {   
                     //below sets the canvas area
               var paper = Raphael(document.getElementById('headerimg'), 450, 150);
                    //this pulls in a logo on to the canvas
               var jlogo = paper.image("/wp-content/themes/noise/images/logo.png", 10, 10, 150, 150); 
                   // you can also draw svg paths which ill show in the future
               var jtag = paper.image("/wp-content/themes/noise/images/jessetag.png", 130, 95, 250, 23); 
                  //set the initial tagline width to 0px
             jtag.attr({width:0}); 
                 //wait 200ms to call function
             setTimeout(comboPush, 200); 
                 //animate width to 250px within 1000ms
             function comboPush() { jtag.animate({width: 250}, 1000) }; 
        }
</script>

Tags: animation, javascript, Raphaël, raphaeljs, svg, vector