jQuery alternative to Adobe Edge Animate?

Question

Here is my current situation.

I started using Adobe Edge Animate about 3 month ago and I both love and hate it. I love it because of how intuitive it is to create moderately complex animations and it has accelerated my workflow since I'm already familiar with Adobe products such as Dreamweaver, Photoshop and Illustrator. I hate it because as I learn more about it, I discovered how limiting it is for web developers since it has no built in support for server side code or even ajax. It also has a pretty heavy footprint.

I've been looking at jQuery plugins and have not found anything that could replace it. I mean such plugin would be a general purpose animation plugin, not one that would make a particular type of animation, such as a slider or carousel.

So, my question is whether such plugin exists.

If not I'm considering making one as an exercise, so any advice on how to implement a timeline, structure description system, trigger/action system and ajax/php integration would be welcomed.

Answer 1

It depends on what type of animations you are leaning towards, because a single jQuery plugin to cover every single type of animation would likely be more of a library and too big for most web projects at this time.

KineticJS is popular as an HTML5 Canvas framework that lets you create lots of animations, transitions, layers, and event handling which are some important things. I linked the site above so you can explore it a little and see what types of games/projects people have made with KineticJS and so you can get a feel of the type of animation for which it can be used.

Another animation library/plugin is CreateJS which has a whole suite of content creation frameworks, the one you probably would be most interested in is TWEENJS, which supports some good stuff like CSS properties, and has a few sponsors already.

One drawback is that both of these animation frameworks are not based on jQuery but are based on JavaScript. This is good and bad because both frameworks don't depend on jQuery but you could probably use jQuery for get elements more conveniently.

Most frameworks are for JavaScript, but there is the standard .animate() method in jQuery that may be limiting compared to a full extended framework. It is more integrated into jQuery and you can animate the CSS properties though, so it all depends on how much you need and what you need exactly. Let me know if these don't suit you, and I'll try to find something different.

EDIT:

If you prefer something from Adobe, which it seems that you might, then take a look at Collie, which is another framework that uses the HTML5 canvas and DOM to create animations using JavaScript.

Answer 2

I'm using Adobe Edge Animate from months now too and I just love it.

I hate it because as I learn more about it, I discovered how limiting it is for web developers since it has no built in support for server side code or even ajax.

I can't undestand what you mean here. Adobe Edge generates JS and CSS and HTML. If you generate them inside a project you can open it with the IDE of your choice. You can execute whatever javascript/jQuery you want. You are not limited to write your code inside Adobe Edge.

Pesonally I use Adobe Edge only to bind functions to the UI events. For example, in the onClick event of a button I call MyApplication.myButtonFunction(); All the javascript is from external scripts.

So I develop in Eclipse and open up the .an project just to edit my GUI and animations.

I really think I'm missing something to understand your point...