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.

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. ;)

6 thoughts on “Image animation with JavaScript”

  1. in feb this year i started this http://www.wscoop.com its a digg style site but deicated to all aspects of web development and design

    But I need your help…

    I need links to web design and development, site , articles links… anything you think of…

    Please are you abel to help me make this into a great resource for developers and designers.

    You are more than welcome to promote your own sites, projects, comments and all… at the moment the posts go straight to the font page to it is good exposer and at least some sweet backlinks

  2. Thank you for commenting and pointing to the new collection of blogs and articles related to the WEB programming / design. I will certainly visit wscoop and submit my favourite sources.

  3. Hello,
    Brilliant script, compliments,
    one little question: Is it possible to adjust this script to make animation only in one direction (from pos A to pos B)?

    regards

    Mladen Vicic
    vernetB.V.

  4. @Mladen – Yes it’s possible. In this example, destination point is the same as start point (see how img_x and img_y are defined). In your case, you can set destination point without control points that will influence the path. If you are interested in YUI Library Examples please see Animating Motion Along a Curved Path

  5. @FIGHOU Zoubair – Animation is tested in FF 3.6, IE8 and Chrome 10. Which web browser and version do you use? Anyway, YUI JS scripts are hosted on YAHOO server, so you maybe have a problem with this URL. Please try to access this link directly:

    http://yui.yahooapis.com/combo?2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.2r1/build/animation/animation-min.js

    You should get a compressed JavaScript code. And one more thought. Maybe your internet connection was slow in the moment and page was not loaded completely. Please, reload page and try again. There really should not be a problem and animation should work flawlessly.

Leave a Comment