GX - A new JavaScript Animations Framework

GX is a full-featured, cross-browser, light weighted JavaScript Animations Framework. With GX you can create complex animations working with every w3c CSS property. Currently, GX is compatible with jQuery Javascript Library and is being released under the MIT License“.

gx_logo_2 GX is not usual JavaScript library for creating animation, The main motive of GX is to develop a real FULL-FEATURED framework for creating smooth, custom and complex animations WITH EASE. So I already say GX is not usual JavaScript library for creating animation . GX is designed for everyone from beginner, intermediate to expert JavaScript users.

GX is developed by Riccardo Degni. When he decided to developed GX keeping in mind mainly two Design Patterns:

  1. 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.
  2. 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 based on Strict Standards and doesn’t generate CSS/Javscript warnings. Although GX is completely cross-browser, it doesn’t contain any Browser sniffing: it’s 100% pure Javascript engine. but what i like about GX is the lightness: it’s super-tiny! The following are the sizes of the version 1.0:

GX.js: 10kb (raw sourcecode, with comments) | 5kb (packed with Dean Edwards Packer) | 1kb (Gzipped)

GX.transitions.js: 3kb (raw sourcecode, with comments) | 2kb (packed with Dean Edwards Packer) | 0.3kb (Gzipped)

Demo: gx Demo | Download : GX Download from Here

Example:
JAVASCRIPT:

// simple animation

$('element').gx({'width':'+=200px', 'height':'4em', 'opacity':0.4, 'color':'#ff0'},
4000);

// queue animations

$('element').gx({width: 0}, 200)
.gx({width: 200}, 4000)
.gx({width: 0}, 'verySlow')
.gx({width: 100}, 'slow');

// 'Complete' callback
$('element').gx({width: 200, height: 200}, 2000, 'Bounce', function(el) {
el.html('The animation is completed!');
});

// 'Start' and 'Complete' callbacks
$('element').gx({width: 200, height: 200}, 2000, 'Bounce',
{'start': function(el) { el.html('The animation is started!'); },
'complete': function(el) { el.html('The animation is completed!'); } }
);

0 comments :