-3

I was recently looking for an alternative JavaScript animation library, because for the few simple animations I wanted, a ~200kb jQuery library is not the best option.

After a bit of searching, I found GSAP, and implemented it successfully (and smoother) than the jQuery animation I had previously created. It weighs in at around 80kb - so still not perfect (but that's with additional plugins to be able to use CSS selectors, if you animate an SVG you can probably omit the 60kb required file).

I'm wondering if there are any other great options available.

Does anyone know of alternative libraries for animating elements with JavaScript?

The best options:

  • Do not rely on jQuery!

  • Either does not rely on CSS3 Keyframes or has a fallback for when CSS3 Keyframes are not available (for backwards compatibility)

  • Has minimal file-size and requires few or no other files to be included

  • Is not too complicated to learn! (either good documentation, or familiar/simple syntax - I don't want to spend days constructing a simple animation)

I'm not interested in Flash at all.

|improve this question
  • did you heard about Adobe Edge Animation and Google Web Designer? – hsawires Dec 29 '14 at 17:33
  • 1
    You're asking for a CODE solution are you not? If you are wanting simple animations why not use CSS3 animation? If you've already created the code and are worried about size and it works have you considered asking on Code Review to see if they can assist in making it smaller? Have you tried using a CDN? Why wont a CDN work? Either way, this is not the best place to ask this. – DᴀʀᴛʜVᴀᴅᴇʀ♦ Dec 29 '14 at 17:50
  • 2
    I feel like this is a duplicate of this question – Zach Saucier Dec 29 '14 at 20:16
  • Do you have a demo of the creation you've made? My guess if you don't need all of the 60kb file if any. – Zach Saucier Dec 29 '14 at 20:18
  • 3
    "Not code, I'm looking for JS animation library recommendations" = a JS animation library is code. – DA01 Dec 29 '14 at 22:46
3

Your question is an incredibly broad one. The best animation library for your project is dependent on what you're doing in that specific project. The optimal library would be a custom one designed specifically for the project, but of course that doesn't answer your question here.

The two best general JavaScript animation libraries in my opinion at the moment are Velocity.js for most basic animations including many UI ones and GSAP (GreenSock Animation Platform) for more intricate ones. GSAP has a lot of additional addons that you can add depending on what the project requires. Both have good documentation and are pretty easy to get setup with.

Since you mentioned SVG specifically, I've found that I don't need an animation library at all for the animations I've done with it, SVG animations and CSS3 are well supported. But if you do for some reason, Snap.svg is one of the better ones.

However, JavaScript animation isn't always the best way to animate your project. I wrote a detailed answer that delves into when and how to use the different animation techniques available to us currently that is worth you reading.

|improve this answer
1

As you said, this question belongs here because animation is within the realm of graphic design. Similarly, Animation should also belong to the realm of CSS. I highly recommend Animate.CSS

Here's another interesting framework that just uses JS for only firing the animation during an event, like you mentioned. http://motorcortexjs.com/

Hi5 for not being interested in Flash!

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.