Friday, March 13th, 2009

GX: A new animation framework

Category: JavaScript, jQuery, Library, UI

<p>

Riccardo Degni has created GX, his latest animation framework. He actually created moo.rd in the past, and this time he is playing on top of jQuery:

I’ve developed GX keeping in mind mainly two Design Patterns:

  • the “Write Less, Do More” Pattern picked from the jQuery Library. With GX you’ll always write as less code as possible to get the best results.
  • the DRY (Don’t Repeat Yourself) Pattern. If a GX’s functionality is needed more than once, it will be internally reused with no duplicate.

GX respects the Strict Standards and doesn’t generate CSS/Javscript warnings. Moreover it prevents possible Memory Leaks because it will always use the same instance for a determinate element (say goodbye to “flickering”) to avoid either memory leaks and flickering issues. This technique allows you to always keep track of your animation’s state.

Although GX is completely cross-browser, it doesn’t contain any Browser sniffing: it’s 100% pure Javascript engine.

Example

javascript
< view plain text >
  1. // simple animation
  2. $('element').gx({'width':'+=200px', 'height':'4em', 'opacity':0.4, 'color':'#ff0'},
  3. 4000);
  4.  
  5. // queue animations
  6. $('element').gx({width: 0}, 200)
  7.             .gx({width: 200}, 4000)
  8.             .gx({width: 0}, 'verySlow')
  9.             .gx({width: 100}, 'slow');
  10.  
  11. // 'Complete' callback
  12. $('element').gx({width: 200, height: 200}, 2000, 'Bounce', function(el) {
  13.   el.html('The animation is completed!');
  14. });
  15.  
  16. // 'Start' and 'Complete' callbacks
  17. $('element').gx({width: 200, height: 200}, 2000, 'Bounce',
  18.   {'start': function(el) { el.html('The animation is started!'); },
  19.    'complete': function(el) { el.html('The animation is completed!'); } }
  20. );

Posted by Dion Almaer at 7:24 am
17 Comments

+----
1.8 rating from 101 votes

17 Comments »

Comments feed TrackBack URI

Props for respecting units in your animation library!

Comment by Liquidrums — March 13, 2009

@RyanMorr: the decision to integrate GX with a Javascript Framework was a complex decision, but in my opinion, a right decision.

First of all, standalone frameworks lacks of features: a situation in which you need only animations happens rarely. jQuery offers a solid base (the Selector Engine, the Data Storage, the Namespace structure) that makes works easier and provides better performances.

Secondly (but not less important) I like the major part of jQuery except the animations’ engine. In my opinion, the jQuery engine offers a great control over animations’ creation, but the resulting effects aren’t smooth enough.
Moreover, if you want to build out an animation more complex than a “base” animation, you have to include Plug-Ins, like for color handling, for easing handling and so on.

For this other reason i decided to integrate GX with jQuery, because I really like jQuery and I use it in many applications that need a complex animations’ engine. 1.3kb (gzipped) are enough for this to happen with GX, with all the other main features that a good-quality Web Software requires.

Many users that use jQuery switch to other Javascript Frameworks when they need to create animations. So, I wanted to provide jQuery users (me included) with a new, super-small engine.

For these main reasons I wanted to integrate GX with jQuery.

Comment by RiccardoDegni — March 13, 2009

Any plans to make this a standalone engine so other js libraries can take advantage of your superb engine? There exists JS libraries out there that uses jQuery-like syntax. ie http://github.com/kltan/yshort/tree/master

Comment by kean — March 13, 2009

Nice work, but can we please stop calling every design principle a pattern?
“Write Less, Do More” is a nice slogan but does not describe a single aspect of design – its simply common sense.

Comment by kissmyawesome — March 13, 2009

How can Safari 2 be supported when scripts relies on `String.prototype.replace` being able to take function as a replacement argument which Safari “backgroundColor”.

How in the world can this work on Safari <= 2.0.4?

Comment by kangax — March 13, 2009

Comment got smooshed… Let’s try again.

How can Safari 2 be supported when scripts relies on `String.prototype.replace` being able to take function as a replacement argument which Safari <= 2.0.4 has never supported? `replace` is used in `Fns.Camelize`, which is then probably used to normalize properties – “background-color” ==> “backgroundColor”.

How in the world can this work on Safari &lt= 2.0.4?

Comment by kangax — March 13, 2009

@kangax – jQuery doesn’t support Safari 2. Since GX requires jQuery its no big deal.
.
Read up: http://docs.jquery.com/Browser_Compatibility

Comment by jdalton — March 13, 2009

@jdalton

I don’t have a problem with it not supporting Safari 2, but the script shamelessly claims that it does. Citing a home page:
Completely Cross-Browser (IE 6+, Firefox 2+, Opera 9.25+, Safari 2+, Google Chrome)

This makes me unsure whether other browsers (for example IE6) were all tested or if they are “supported” in the same way as Safari 2 is : )

Comment by kangax — March 14, 2009

@kangax: GX doesn’t support Safari 2 at all, I have only mistyped the version number on the home, that I’m updating now :) Sorry for that issue.

GX has obviously been tested with all the browser that are compatible with jQuery (so, Safari “3″+).

IE6 is supported at all, so it supports all the features provided by GX (thousands of tests have been made). However, as in all others open-source project, if you find any bug you can report it to the GX’s discussion page.

Comment by RiccardoDegni — March 14, 2009

For whatever it’s worth, I checked out the demos in Safari 4 Beta and most of them are choppy and unpredictable.

Comment by eyelidlessness — March 15, 2009

@eyelidlessness: as you said, Safari 4 is currently a beta and actually GX doesn’t support beta browsers.

Comment by RiccardoDegni — March 15, 2009

I think that this is a great library…

Add abstraction to abstraction is CODING.

You spek with common language, but you use simple construct… Different level of abstraction, give to human a like understandable language not only for us nerd/geek/codeeater.
Why use -h in linux? ;)

Comment by nunziofiore — March 15, 2009

@RiccardoDegni,
Sure, but it’s worth a look, considering that Safari 4 will be out in a couple months, and it’s likely due in part to the faster JS engine (which may raise similar problems in FF 3.1, also due soon, and Chrome).

Comment by eyelidlessness — March 15, 2009

Two words.. MOO Tools :P

Comment by mmastro — March 16, 2009

@mmastro: two words: JQUERY 4EVER! (and now with GX!)

Comment by Flyroo — March 17, 2009

I love it, thank you Mr. Degni!

An interesting trick would be to detect IE and do this in SMIL2/HTML+TIME (http://en.wikipedia.org/wiki/HTML%2BTIME), or, in newer WebKits, CSS animation (http://webkit.org/blog/324/css-animation-2/). Opera has SVG animations (http://devfiles.myopera.com/articles/76/SolarSystem2.svg), but I don’t know how that could be worked into manipulating xHTML DOM.

Mozilla browsers – torn between ACID3′s newfound love of SMIL (http://brian.sol1.net/svg/) and implementing CSS animation in FF4?

Comment by blinkingmarquee — March 17, 2009

This is admirable work. We’re starting to implement more support for animation in the UIZE JavaScript Framework, and this work sets the bar quite nicely. Thanks.
 
I was tooling around this weekend with the kinds of effects that can be added quite simply with the animation features of UIZE… fun…
 
http://www.uize.com/examples/hover-fader-for-thumbnails.html
 
This was following off of noodling around with this same widget as it could be applied to text only links…
 
http://www.uize.com/examples/fading-links.html
 
The underpinnings of value automation / interpolation in UIZE is provided as part of the Uize.Fade class. This is something that can be used for any kind of automation, and even non-time based compound value interpolation. UIZE takes a very object oriented and modular approach. Next up is the Uize.Fade.xFactory extension, which extends the Uize.Fade class with factory methods for no fuss fade initiation. Upon this is added the Uize.Fx module that provides Web specific features for fading values of CSS style properties. Like this GX framework, the Uize.Fx.fadeStyle semantics support fading of arbitrary sets of style properties.
 
Some reference links…
 
http://www.uize.com/reference/Uize.Fade.html
http://www.uize.com/reference/Uize.Fade.xFactory.html
http://www.uize.com/reference/Uize.Fx.html
 
Besides generalized style fading, there’s plenty of other animation to be had in the framework, such as in the Uize.Widget.ImageWipe widget…
 
http://www.uize.com/examples/image-wipe.html

Comment by uize — April 6, 2009

Leave a comment

You must be logged in to post a comment.