Animation in javascript, a starting point

Question

I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?

In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?

Answer 1

Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.

try scriptaculous for your animations;

• here's a quickie 3-line tutorial so you can see it working
• here's a more complete tutorial
• here's the scriptaculous wiki

note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.

Good luck!

/mp

Answer 2

if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.

Answer 3

Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.

Personally, I wouldn't be animating things in JS. Flash FTW.

Answer 4

If you aren't concerned with IE support, you could also try experimenting with the canvas element:

MOZILLA DEVELOPER NETWORK Basic animations