JavaScript: Simple Animation

I decided to write a small post explaining how one can do simple animation in JavaScript without script.aculo.us, moo.fx etc. Thought I highly recommend both these libraries and I really like animations done through them and I myself use script.aculo.us! I thought that it would also be good to know how they do it.

So let us start. We a are first making a simple HTML page with an image and a link to shrink that image we are also including a simple CSS file, prototype so that our code can be shorter and logic.js.

The HTML will look something like this –

    <link rel="stylesheet" type="text/css" href="res/ui.css"/>
    <script src="res/prototype.js"></script>
    <script src="res/logic.js"></script>
    <p>Here we will try to make this image shrink with the help of prototype. You just need to click on the following <a href="javascript:;" id="link">link</a>.</p>
    <img src="img/rails.png" alt="Rails" id="rails"/>

Our CSS file just includes padding and margin declarations for the body. Our JS file looks something like this, I will explain each line later –

Event.observe( window, 'load', function(){
  $('link').onclick = shrinkImage;
shrinkImage = function(){
  domID = 'rails';
  var dimensions = $(domID).getDimensions();
  function shrink(){
    if(dimensions.height<0 || dimensions.width<0){
    $(domID).height = $(domID).height-5;
    setTimeout(shrink, 50)
  setTimeout(shrink, 50)

If you want you may also download the ZIP file for the JavaScript: Simple Animation tutorial.

The code JS code is pretty short (17 lines) so I am going to refer to code from there line number only. So at line 1 we use prototype’s Event observer and once the page has completely loaded we access the “anchor” element whose id is “link” and we attach a the “shrinkImage” function to it onclick. The fun begins at the shrinkImage function. We first make a variable where we keep the domID, you may wish to take this as a function parameter too. We get its dimensions and keep it in the dimensions varialble.

We now make a nested function inside the shrinkImage function and this function is called shrink. If the dimensions of the element are zero then it hides the element and breaks out of the function. If not it reduces the elements height by 5. We are trying to shrink an image so if we reduce one the other is reduced in the correct ration. Then we create a timer which calls the function again after 50 milliseconds. Once this function is completed we call if after an interval of 50 milliseconds and the animation begins!

Any feedback is welcome!


18 Responses to “JavaScript: Simple Animation”

  1. May 21, 2007 at 8:41 am

    Thats cool way of shrinking image using JavaScript….It will be more useful if we can stop animation in between by another click…..just a thought…

    Keep up the Good Work πŸ˜‰

  2. May 21, 2007 at 9:26 am

    Deep C, As mentioned in the Blog title this is just Simple Animation. I was thinking of making more tutorials (if this one gets good response) that would include better effects with more parameters such as duration, stopping it in between (as you have mentioned) and more things.. πŸ™‚

  3. May 21, 2007 at 9:40 am

    Any feedback of what else you want in the tutorials is welcome πŸ™‚

  4. 4 oets
    May 21, 2007 at 1:26 pm

    In the function shrink() you are reading out the values of dimensions.height and dimensions.width. These values will never change, and therefore the .hide() will never be executed. Unless your image size is smaller than 0 offcourse.

    This check must be replaced in the shrinkImage() scope.

    Prototype rulez.

  5. May 22, 2007 at 12:55 am

    Good point thanks a lot! I will put the corrections ASAP!!

  6. 6 tom
    June 23, 2007 at 12:03 pm

    wow , nice tutorial !!
    keep up the goodwork

  7. 7 tom
    June 23, 2007 at 12:11 pm

    can i ask ??

    can you teach me how to put comment script in my site …

    i dont know the javascript for that..


  8. June 23, 2007 at 9:01 pm

    @tom: thanks for leaving a comment.

    I am currently using WordPress, that already has the functionality of other people adding comments and stuff, but I heard that there is something like [Halo Comments] [http://www.haloscan.com/] that helps to allow our visitors to leave comments on the different pages.

    I hope it help >.

  9. 10 jasper
    August 1, 2007 at 9:14 am

    ahm can u help me…

    coz im doing javascript now…

    and that is our last topic…
    our lecturer assigned us to create a web site that uses javascript..

    how to put a pop up window??

  10. 11 jasper
    August 1, 2007 at 9:18 am

    how to put window media player??? hehehhe sorry coz i dont know yet how…

    wud u mind to respond as soon as possible.. thank u!

  11. 12 scott
    August 8, 2007 at 10:56 pm

    great tutorial

    however, i tried making a div with the same id and it didnt work

    perhaps a new tutorial for shrinking div’s?

    great work though

  12. August 9, 2007 at 1:02 am

    I think it should work on DIV’s as well.

    I will check and get back to you in the form of a new post!! ^_^

  13. February 11, 2008 at 5:18 am

    Hello sir..

    are you really sure that ur 15 yrs old??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

About Me

Hi - I am Prateek Saxena I am 15 years old and I am freelance web designer / developer and I love JavaScript. I am currently working on some of my own projects about which you will find out soon. You can email me or IM me through Yahoo Messenger (prateek.saxena).

Threadless Submissions

My Threadless.com Submission

%d bloggers like this: