Great animation engines for Javascript? - Javascript/Animations

Question

I'm trying to implement a timeline based animation, where animations will be able to be:

paused
resumed
fast forwarded
slowed down
reversed
...

Are there any animation/tweening engines for Javascript that could be used for such purpose? Or that would be highly recommended?

Hwlp would be great, especially as this really interests me! =)

JQuery and others have general purpose animation engines, but if you need a perfomance and memory stable engine write your own in pure javascript. For the features you mention, it's not hard. A queue and a timer wrapped in a 120-line class worked for me in a situation similar to yours. Good luck. — user347594, Aug 04 '10 at 03:15

score 4 · Answer 1 · answered Nov 05 '10 at 04:10

I don't know if you're still interested, but i'm looking for the same as you (believe me, I'm searching for HOURS and hours), and I don't know if I really found what I was looking for. The closest is jsAnim (http://jsanim.com) and it's working ok for now. I made a list of what i've found on the net:

(Comments are very unparcial and testing was made very quickly. Please take it with tweezers.)

jsAnim: Syntax is very easy to focus on animation and not on object architecture (see YUI) (which is great... for engineers...). Easing options are not awesome, but nice. Overall, works fine.
Scripty2 (former Script.aculo.us): Not tested for requiring Prototype.
moo.fx: Not tested for requiring Prototype or mootools.
YUI 2/3 Animation: Worked ok, but it's engineer code has a high learning curve for a casual front-end animation.
$fx(): Has a very-ultra-small footprint (only 3 KB!). Would be the choice if only had easing.
Trident-js: Seems to have a very powerful timeline and looks great on the demos, but it didn't worked for me at all and it's skinny documentation don't helps much.
Animator.js: Syntax scared me. Also seemed very amateur to me.
JSTweener/GX/xAnimation: Those didn't captured my attention even a little. Seemed very amateur to me.
Glimmer GUI for jQuery code generation: Setup didn't installed on my machine (installer's unknown error).
Raphael/Burst Engine/Processing.js/Pixastic/Cake-js: They are for canvas/vectors. Another kind of (cool)stuff.
Spritely: Also for another kind of things: sprites animation.

So the winner, for now and for my current animation requirements, is jsAnim. I also want to give a try to Scripty2 and moo.fx since they seem to be around for some time (both from 2005, Scripty2 is the second version of Script.acoulo.us).

My 2cents. Hope it helps somebody. Now God I want my last 8 hours back!!!

I didn't realize how awesome jsAnim was. I saw that you picked jsAnim over libraries on the list I had picked over jsAnim. So I checked it out again and dang it is great. The manager options is great — brenjt, Feb 02 '12 at 22:46

score 2 · Answer 2 · answered Jul 19 '10 at 14:33

2

I don't think what you're looking for exists, you should write it yourself.

Also I think Adobe is coming out with a set of tools for JS/HTML/CSS animations, you can check their presentation at Google IO.

answered Jul 19 '10 at 14:33

Mark

32,293
33
107
137

score 1 · Answer 3 · answered Jul 19 '10 at 10:06

1

Try to use Yahoo UI:

http://developer.yahoo.com/yui/3/examples/

Look at Animation section.

answered Jul 19 '10 at 10:06

loentar

5,111
1
24
25

Peter Örneholm · Accepted Answer · 2010-07-19T11:35:32.783

1

I think all of these frameworks will ~~do that for you~~ (reverse isn't supported by all of them I see):

jQuery: http://api.jquery.com/animate/
$fx: http://fx.inetcat.com/manuals.php
Scriptaculous: http://wiki.github.com/madrobby/scriptaculous/
Yahoo! UI Library: http://developer.yahoo.com/yui/3/api/module_anim.html

I prefer jQuery.

edited Jul 19 '10 at 11:35

answered Jul 19 '10 at 11:23

Peter Örneholm

2,838
20
24

thanks for that, but what about starting an animation from a certain point in time, within the time frame? – RadiantHex Jul 19 '10 at 12:20
This might give you some idea: http://stackoverflow.com/questions/664867/scrolling-a-jquery-animation-backwards-and-forwards – Peter Örneholm Jul 19 '10 at 13:14

score 0 · Answer 5 · answered Jun 26 '15 at 09:21

0

I suggest BetweenJS a cross-browser portage of BetweenAS3 for Javascript, where everything u asked for is implemented and ready to use http://github.com/sazaam/BetweenJS/

answered Jun 26 '15 at 09:21

iggy_face

1

score 0 · Answer 6 · answered Jul 19 '10 at 11:17

0

You can take a look at jQuery animate at

http://www.visualjquery.com/

in the search field write "animate" click on item and you will see some examples there.

answered Jul 19 '10 at 11:17

Zsolti

1,571
1
11
22

jQuery is wonderful, but I find it quite hard to create a timeline based animation which is also flexible enough to be treated as a "movie". – RadiantHex Jul 19 '10 at 11:37

thednp · Answer 7 · 2016-03-14T11:58:22.327

0

For a complete feature set, check out KUTE.js. It features transform, box model properties, scroll, presentation attributes, SVG morph, SVG draw, tween collections, pause and a ton of easing functions.

edited Mar 14 '16 at 11:58

answered Mar 10 '16 at 21:49

thednp

4,401
4
33
45

Great animation engines for Javascript? - Javascript/Animations

7 Answers7