GX: A new animation framework
April 10th, 2009 by admin
Friday, March 13th, 2009
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:
-
-
// 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!’); } }
-
);
-
Loading ...
0 Responses to “GX: A new animation framework”
Leave a Response