Image animation with JavaScript

How to animate images with JavaScript? Is it complicated? What tools and technologies you need to use? This post explains how to make image animation and includes a small demonstration - working example. Let start with the demo first, click on the Animate button below and if you like it, please read further.

Browsers are very powerful today. After loading HTML page, Data Object Model (DOM) is created for every page element. Elements and their properties can be accessed and changed. Front End developing is hard to imagine without FireFox and FireBug add-on. With FireBug, you have ability to browse all page elements, inspect page objects and change their properties. In this post, logo image (spider) is also an object. This object has ID named logo_img.

<img src="/path/image.jpg" id="logo_img" width="X" height="Y" title="Spider" border="0"/>

Giving ID is optional. It is good to give ID to the HTML element if this element should be accessible via JavaScript. This way, HTML element marked with ID is easier for accessing. If object has ID, you can make reference to that object by JavaScript function getElementById. Be careful because JavaScript is case sensitive, otherwise your script will not work.

If you are JavaScript expert, you can write your own animation code, but you will have to know differences between browsers. Why? Because DOM is not exactly the same between FF, IE, Safari ... This differences are small but big enough for wasting your time for exploring why animation works in FF and not in IE or vice versa. Today, you can find tested and ready cross browser JavaScript libraries.

• The Yahoo! User Interface Library (YUI)
• jQuery
• script.aculo.us

Just include them to your page, use their functions and your JavaScript code should work in almost any browser. Yes, first you'll need to read API documentation and study the examples ... I started with YUI, played with jQuery and heard about script.aculo.us ... I'm not sure about jQuery and script.aculo.us, but Yahoo has free hosting of YUI files and this is surely an advantage. With using YUI library, you will have image animation and minimal traffic (JavaScript libraries will be served from Yahoo). They also created utility YUI: Configuration and Hosting where you can choose needed libraries and tool will automatically resolve all dependencies. After clicking on wanted library, text area in that tool will update with the sorted dependency list required to power your desired components. In my case after clicking on animation library button, their tool has generated HTML <script> line.

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/animation/animation-min.js"></script>

This is the only line which loads the cross bowser JavaScript libraries. It should go to the HTML head section. In this example, I put it inside WordPress post and it works. Why? Because animation is started on button click after all JavaScripts libraries are loaded. And here is JavaScript code for the image animation.

function animate_image(){
  // set the image ID
  var img = 'logo_img';
  // get reference to the image (HTML element)
  el = YAHOO.util.Dom.get(img);
  // define the image starting position (X and Y coordinates)
  img_x = YAHOO.util.Dom.getX(el);
  img_y = YAHOO.util.Dom.getY(el);
  // define end position and curve (move the image to the starting
  // position but through the two distant points)
  var attributes = {
    points: {
      to: [img_x, img_y],
      control: [[700, 300], [-100, 700]]
    }
  }
  // create an instance of YAHOO.util.Motion, passing it the
  // element we wish to animate
  var myAnim = new YAHOO.util.Motion(img, attributes);
  // start animation
  myAnim.animate();
}

In this example, I put all JavaScript code inside animate_image() function. It was easier solution because JavaScript code is maintained inside WordPress post. The correct way would be to move JavaScript lines from animate_image() function to the HTML head (inside script tags) and to call only myAnim.animate() on button click.

Related posts

• Image hover using Javascript
• JavaScript Drag and Drop example 4
• JavaScript Drag and Drop example 3
• JavaScript Drag and Drop example 2
• Maintain vertical scroll position

This entry was posted on Thursday, 18.09.2008. at 14:05and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.