GX – Javascript animations Framework auf jQuery

Riccardo Degni, dem ein oder anderen evtl. von moo.rd bekannt, hat ein neues, super schlankes (10kb), cross-browser fähiges animations-framework auf jQuery veröffentlicht.
Mit GX lassen sich komplexe Animationen, mit allen W3C-konfromen CSS-Elementen erstellen.

GX soll nicht nur eine einfache Bibliothek zum erstellen von Animationen sein. Riccardo will mit GX weitergehn und es zu einem FULL-FEATURED-FRAMEWORK werden lassen mit welchem sich weiche-, benutzerdefinierte- und komplexe-Animationen mit easing erstellen lassen.

Wichtig waren Riccorado bei der Entwicklung zwei wesentliche Ziele:

“Write Less, Do More” von jQuery. Mit GX soll man immer so wenige Code wie nur irgend möglich schreiben müssen um die besten Ergebnissen zu erzielen.
“Don´t Repeat Yourself”. Sollte eine funktionalität von GX mehr als einmal gebraucht werden, wird diese intern wiederverwendet ohne diese zu duplizieren.

Das schöne an der ganzen Geschichte ist die Einfachkeit der Implementierung. Wo frühre versch. scriptfetzen nötig waren reichen jetzt ein paar einfache Zeilen aus um komplexe Animationen zu realisieren.

^?View Code 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!'); } }
);