Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animation in javascript, a starting point

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?

like image 918
Teifion Avatar asked Aug 13 '08 16:08

Teifion


People also ask

How do you animate using JavaScript?

To make an animation possible, the animated element must be animated relative to a "parent container". The container element should be created with style = "position: relative". The animation element should be created with style = "position: absolute".

Is JavaScript good for animation?

Adding simple animations can easily be done with CSS, but as soon as it comes to more complex or advanced effects, JavaScript is the better tool. Among the endless supply of libraries that can be found, here are the ten best JavaScript animation libraries to use in 2021.

Should I use CSS or JavaScript for animations?

TL;DR # Use CSS animations for simpler "one-shot" transitions, like toggling UI element states. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down.

Does JavaScript require css3 animation?

CSS animations make it possible to do simple animations without JavaScript at all. JavaScript can be used to control CSS animations and make them even better, with little code.


2 Answers

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;

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

like image 68
mauriciopastrana Avatar answered Nov 05 '22 18:11

mauriciopastrana


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.

like image 27
DevelopingChris Avatar answered Nov 05 '22 20:11

DevelopingChris