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. 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, browser creates Data Object Model – DOM. Elements and their properties can be accessed and changed. With DOM inspector (like FireBug), you have ability to browse all page elements, inspect page objects and change their properties. Logo image (spider) in page header is object with ID logo_img. Here is HTML code:

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

HTML elements marked with ID are easier for accessing. If object has ID, you can make reference to that object with JavaScript function getElementById (be careful because JavaScript is case sensitive).

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, Chrome, Opera … This differences are tiny but big enough for tearing your hair out for a couple of hours. Today you can find well tested and ready crossbrowser JavaScript libraries.

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

Just include them to the page and use their functions. 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 (because of serving JavaScript libraries 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, tool will print the sorted dependency list required to power your desired components. In my case after clicking on animation library button, their tool has generated the following <script> line.

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

This is the only line which loads all YUI JavaScript libraries. The cleanest position of <script> should be in head section. On the other hand, YUI suggest “at the bottom” because then the entire DOM will have been loaded before anything can start executing. In this demo, YUI library are loaded from the middle of the HTML page – because it’s a WordPress post and I can’t modify header nor footer section. Anyway, here is the JavaScript code used for image animation in this page:

function animate_image() {
        // set image ID
    var img = 'my-img',
        // get reference of image
        el = YAHOO.util.Dom.get(img),
        // define image start 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 image to start position but through distant points
        attributes = {
            points: {
                to: [img_x, img_y],
                control: [[900, 300], [-100, 700]]
            }
        },
        // create YAHOO.util.Motion instance
        // input parameters are image object and attributes
        myAnim = new YAHOO.util.Motion(img, attributes);
    // start animation
    myAnim.animate();
}

This example may give the answer on question why use JavaScript frameworks? Do more with less code. ;)