Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Great animation engines for Javascript? - Javascript/Animations [closed]

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! =)

like image 227
RadiantHex Avatar asked Feb 27 '23 15:02

RadiantHex


2 Answers

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!!!

like image 88
Alejandro García Iglesias Avatar answered Apr 27 '23 17:04

Alejandro García Iglesias


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.

like image 27
Mark Avatar answered Apr 27 '23 15:04

Mark