Great animation engines for Javascript? – Javascript/Animations

by

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

17 thoughts on “Great animation engines for Javascript? – Javascript/Animations”

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

    Reply

  5. 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.

    Reply

  6. 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.

    Reply

  7. This probably out of date, but for those of you who are stil intrested, GSAP is the perfect library for this, easily create and nest multiple timelines, pause,resume and kill them as you wish and many more intuitive things you can do.

    Here’s their official link:

    https://greensock.com/

    Reply

Leave a Comment