Friday, November 3rd, 2006

Animator.js: animations using CSS

Category: Prototype, UI

<p>Bernie Sumption loves the functionality of Moo.fx, Script.aculo.us and Rico but thinks that inheritance is evil:

In particular, they don’t seem to realise that inheritance is evil, and must be destroyed. By providing base classes for an effect and requiring users to subclass it to make new effects, they create a proliferation of classes and make it too hard to create new effects that the library designer hasn’t thought of (scriptaculous gets round this by thinking of every effect you might want, which is why it is so large).

So, he decided to use the strategy design for his new animation library Animator.js (also built on Prototype).

What sets it apart from other animation libraries is the that you can use CSS to define the start and end states:

javascript
< view plain text >
  1. var fade = Animator.apply($('myID'), "background-color: #FFFF00; width: 100px; height: 100px;");
  2. fade.play(1);
  3.  
  4. // or
  5.  
  6. var ex11 = new Animator().addSubject(new CSSStyleSubject(
  7.     $('ex11Button'),
  8.     "width: 10em; background-color: rgb(256, 256, 256); border-width: 1px;",
  9.     "width: 40em; background-color: #F39; border-width: 5px;"));

Simple. Small. Fast.

Check out his tutorial to see it all in action

Related Content:

Posted by Dion Almaer at 7:39 am
21 Comments

++++-
4.3 rating from 64 votes

21 Comments »

Comments feed TrackBack URI

I personally think that this is great. At least the using pure CSS to define the start and end states. I still love script.aculo.us only because it has 80% of what I need already built, so there is less time used there. But I might consider this for some of my custom JS effects that I have been previously extending script.aculo.us for… interesting.

I’d like to see someone do some benchmarking on this in multiple browsers.

Comment by Ryan Lowe — November 3, 2006

It’s true that Inheritance in animation is quite difficule. And your solution is really welcome and very sexy.

Nice job !

Comment by Nicolas BUI — November 3, 2006

I think it’s a little unfair to compare Animator.js to Moo.FX when Mootools is out. In Mootools the Fx.Styles “effect” allows for many simultaneous transitions in one operation, much like Animator.js.


effect = new Fx.Styles('demoElement');
effect.custom({
'opacity': [1,0.3],
'margin-left': [0, 300],
'height': [40, 100],
'font-size': [25, 60]
});

Add in large list of available easing functions (from Robert Penner) and very complex effects can be created without going overboard on class inheritance.

(Looks like jsLINB had the same idea. Or visa versa – it’s hard to tell who came up such things first nowadays.)

Comment by Jeffrey — November 3, 2006

Thanks for the link Ajaxians!

If anyone has and comments, bug reports or suggestions, or needs some help working Animator.js into their project, email me (bernie at berniecode.com) and I’ll see what I can do.

I’m especially interested to hear if it works in old or rare browsers.

Comment by Bernard Sumption — November 3, 2006

Nice. I really like the simplicity of approach, and the fact that anyone who knows CSS can jump right in. Seems like a step up even on the approaches mentioned above, just on the merit of familiar syntax. I’m looking forward to having an excuse to try it out in a project.

Comment by Mark Guinn — November 3, 2006

“What sets it apart from other animation libraries is the that you can use CSS to define the start and end states:”

I read that and thought maybe JS would animate between two states defined entirely in CSS – eg.

.button {
background:#333;
color:#fff;
}

.button.active {
background:#ccc;
color:#000;
}

.. So .button would be the default state, .active would be equivalent to :hover etc.

(Maybe the library does this and I missed it?) – but it would be really cool if a class modification were ultimately made by the script (between start and end states,) but the in-between frames would be the calculated animation. That would be really awesome!

Comment by Scott Schiller — November 3, 2006

Scott – currently, styles applied via stylesheets can be used to define the ‘from’ state of the animation only; the ‘to’ state must be defined in code. Having both states defined as classes in .css files is a very good idea however since it would keep presentation information out of the JavaScript.
I know that this area is fraught with browser incompatibilities but I’ll see if I can work something in to the next update.
Thanks for the input.

Comment by Bernard Sumption — November 3, 2006

Brilliant approach! About an order of magnitude in the range of 10 times easier to work with for combo effects than anything I’ve seen yet. Inheritance in general, however, is certainly not evil. That’s a little bit like saying “code re-use is evil”. Anyway, good job.

Comment by Ryan Gahl — November 3, 2006

Brilliant, in scale of 10 this get to me an 9.6
I was thinking to do something similar for a website where I want to avoid using Flash, and this library came out extremely handy.

Good Job. Thank You.

Comment by Giuseppe Turitto — November 3, 2006

Thanks Ryan. And also, although inheritance is not always evil, I feel that it is overused in JavaScript. You’re right that it’s a good tool for code reuse, but people end up using it for configuration. I guess it falls into the same category as eval() – indispensable in the hands of someone who knows what they’re doing, but easily abused.

Comment by Bernard Sumption — November 3, 2006

this is very mich like jQuery’s ‘animate’ function. Just say what you want the matched object to change to it will animate to it. I love that function so much. Really easy to use.

Comment by Matt Oakes — November 3, 2006

Nice approach. I, too, have felt the pain of over engineering of JS animations. I think that building on this simple approach (as long as it stays simple) will help a lot of people avoid a lot of JS pain.

Comment by Dan — November 3, 2006

[...] Ajaxian » Animator.js: animations using CSS Анимация с использованием CSS (и JavaScript видимо) (tags: css javascript ajax руководство вебдев) [...]

Pingback by Binary Look » links for 2006-11-03 — November 3, 2006

Wow, that is really great. Keep up the good work. This may be replacing Scriptaculous in a project I’m working on.

Comment by Jeremy Olson — November 3, 2006

Wow! What a great library and project.

The concept is great. Really looking forward to see where this one will take us.

Comment by Tobie Langel — November 3, 2006

jQuery has some similar lib for these kind of fx as well. One line of code is awsome, but I still prefer having more controls over what I really need.

Comment by Simon Jia — November 3, 2006

Bernard, what’s the license for this code?

I’ve got a MochiKit port and would like to know how I can license/release it. Shoot me an email (grayrest@ my website). Excellent work, I look forward to using my port. ;]

Comment by Karl G — November 3, 2006

[...] [Descargar][Demo] [Via] [...]

Pingback by Animator.js, animación en JS y CSS - aNieto2K — November 4, 2006

[...] I was pleasantly surprised by all the good feedback I got for Animator.js since Ajaxian linked to the article. They even suggested that I speak at the next Ajax Experience, which would be exciting – watch this space. [...]

Pingback by BernieCode » Moving Animator.js forwards — November 5, 2006

Manual pingback: I’ve got a request for enhancements up on my blog. For the next release I’m aiming for compatability with more toolkits so let me know what needs to be done to support your favorite environment.

Comment by Bernard Sumption — November 5, 2006

It’s a nice idea – the same I had some weeks ago – I miss some intelligent functions to fade a color to Black and white or Penner’s EASE functions (which are implemented in MooTools now). Or what about a function that doubles the size of a div etc. My framework will come out soon. But I like the idea, greetz

Andi

Comment by Andi — November 7, 2006

Leave a comment

You must be logged in to post a comment.