Comments on: Animator.js: animations using CSS

By: Andi

Andi — Tue, 07 Nov 2006 09:10:22 +0000

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

By: Bernard Sumption

Bernard Sumption — Sun, 05 Nov 2006 12:43:54 +0000

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.

By: BernieCode » Moving Animator.js forwards

BernieCode » Moving Animator.js forwards — Sun, 05 Nov 2006 11:59:58 +0000

[...] 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. [...]

By: Animator.js, animaciÃ³n en JS y CSS - aNieto2K

Animator.js, animaciÃ³n en JS y CSS - aNieto2K — Sat, 04 Nov 2006 12:07:56 +0000

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

By: Karl G

Karl G — Sat, 04 Nov 2006 04:17:56 +0000

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. ;]

By: Simon Jia

Simon Jia — Sat, 04 Nov 2006 01:18:44 +0000

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.

By: Tobie Langel

Tobie Langel — Sat, 04 Nov 2006 00:46:07 +0000

Wow! What a great library and project.

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

By: Jeremy Olson

Jeremy Olson — Fri, 03 Nov 2006 23:07:01 +0000

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

By: Binary Look » links for 2006-11-03

Binary Look » links for 2006-11-03 — Fri, 03 Nov 2006 22:22:08 +0000

[...] Ajaxian Â» Animator.js: animations using CSS ÐÐ½Ð¸Ð¼Ð°Ñ†Ð¸Ñ Ñ Ð¸ÑÐ¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ð½Ð¸ÐµÐ¼ CSS (Ð¸ JavaScript Ð²Ð¸Ð´Ð¸Ð¼Ð¾) (tags: css javascript ajax Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾ Ð²ÐµÐ±Ð´ÐµÐ²) [...]

By: Dan

Dan — Fri, 03 Nov 2006 22:05:59 +0000

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.

By: Matt Oakes

Matt Oakes — Fri, 03 Nov 2006 18:03:09 +0000

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.

By: Bernard Sumption

Bernard Sumption — Fri, 03 Nov 2006 17:43:43 +0000

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.

By: Giuseppe Turitto

Giuseppe Turitto — Fri, 03 Nov 2006 16:47:16 +0000

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.

By: Ryan Gahl

Ryan Gahl — Fri, 03 Nov 2006 16:32:11 +0000

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.

By: Bernard Sumption

Bernard Sumption — Fri, 03 Nov 2006 16:05:00 +0000

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.

By: Scott Schiller

Scott Schiller — Fri, 03 Nov 2006 15:37:47 +0000

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

By: Mark Guinn

Mark Guinn — Fri, 03 Nov 2006 15:36:01 +0000

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.

By: Bernard Sumption

Bernard Sumption — Fri, 03 Nov 2006 15:07:23 +0000

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.

By: Jeffrey

Jeffrey — Fri, 03 Nov 2006 14:56:33 +0000

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

By: Jack

Jack — Fri, 03 Nov 2006 14:15:49 +0000

Nice, it's just like : this one code like:


  linb('div1').fx1({'width':[100,10],"height":[100,10]}).start();