GX - Full-featured Javascript Animations Framework
GX, my latest project, is come.
As the official page says, “GX is a full-featured, cross-browser, super-tiny (10kb uncompressed) Javascript Animations Framework. Using GX you can create complex animations working with every w3c CSS property. Currently, GX is designed in order to work with the jQuery Javascript Library and is being released under the MIT License“.
That’s not all. GX is not like an usual library for creating animations, its main goal goes further, in order to build a real FULL-FEATURED framework for creating smooth, custom and complex animations WITH EASE.
First of all, i want to start saying that GX is designed for everyone: beginner, intermediate and expert Javascript users. I decided to integrate GX with the jQuery Javascript Library for two main reasons: first, i really like the jQuery framework and its awesome community, and i find that the former is one of the best open source products available on the Web.
However, when i needed to make some complex animations, i was really getting mad (too many scripts required and placed in the same page for extending the core engine, too many kb). Secondly, i have already developed a software based on MooTools called moo.rd, so i wanted to create something else based on another library.
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.
Online resources
You can find deep informations on GX as well as see it in action at http://gx.riccardodegni.net/. Documentation and Demos availables.
Sizes in kb
One of the greatest features of 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)
Note: i have adapted the complex Easing Equations provided by Robert Penner (10 equations and 30 easing types) to be used with GX in a super-small script that wheights only 3kb uncompressed.
Integrate GX with your pages
GX can be easily integrated into your pages by inserting it after the desired jQuery script. No more operations, it’s done.
<script src="jquery_1.3.js" type="text/javascript"></script>
<script src="GX.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// do stuff with jQuery and GX...
});
</script>
Simple animations
Now let’s start speaking about the GX engine. In a few words, with GX you can animate every CSS properties at once, and you can do this in an extremely easy way. Look at the following example:
$('element').gx({'width':'+=200px', 'height':'4em', 'opacity':0.4, 'color':'#ff0'},
4000);
Using the gx (or the alias anime) method, you can animate the described CSS properties of the ‘element’ DOM element within 4000 ms. As you can see, you can use either normal values and relative values, as integers. For colors, you can use the full hex notation, the short hex notation, an array of three values and the Color’s keywords that you can create and customize in every way (i will describe it better the next week with a great article).
Queue and cancel
GX offerts a complete control over animations. By default, you can queue an infinite number of animations, that will be executed one after another. The following code will animate the ‘width’ property four times:
$('element').gx({width: 0}, 200)
.gx({width: 200}, 4000)
.gx({width: 0}, 'verySlow')
.gx({width: 100}, 'slow');
However, you can decide to cancel the current animation and replace it with another (e.g. when you hover the links). To do this, you need to alter the GX option called ‘queue’ of your element using the gxInit method:
// first set the 'queue' option
$('element').gxInit({queue: 'cancel'});
// later
$('anotherElement').hover(function() {
$('element').gx({width: 0}, 200);
}, function() {
$('element').gx({width: 200}, 200);
});
Using ‘wait’ as value of the queue option, further calls will be ignored if the animation is running.
Build a complex animation: Transitions and Callback(s)
With GX you can create very complex animations. If you insert the GX.transitions.js script, you’ll be able to use all the GX Easing Equations (based on the Robert Penners’ ones), otherwise you can only use the default ‘Linear’ transition. Easing is the third parameter of the gx method, and can be passed in two ways: ‘Easing’ and ‘Easing:Type’. For example: ‘Bounce’, ‘Elastic:In’, ‘Back:Out’, ‘Bounce:InOut’. If you don’t specify the type, ‘InOut’ keyword will be used.
There are a lot of transitions available with GX.transitions.js: Sine, Quint, Quart, Quad, Expo, Elastic, Cubic, Circ, Bounce and Back.
The callbacks allow you to either call a function when the animation is completed (by using a function) or when the animation starts and finishes (by using an object). The element you are animating and its GX instance will be passed as arguments. See the following:
// '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!'); } }
);
Pause and Resume
One of my favourite features of GX is the full pause/resume support. I absolutely consider that one of the best feature of the framework: you can pause and resume the animations as you want. How to do this? Simply: use respectively the new gxPause and gxResume methods:
// start the animation (usually do this within an event handler)
$('element').gx({width: 200, height: 200}, 2000, 'Elastic');
// pause the animation
$('element').gxPause();
// later... resume the animation from the previous break point
$('element').gxResume();
Remember that you can pause and resume your GX animations any time and how many times you need.
Special values
GX is designed in order to be easily extended with new classes/methods (coming soon some new amazing features). Because of this, i added a full support for the “special” values, so the “show”, “hide” and “toggle” keywords can be used as values (obviously, this makes sense only with a small set of CSS properties).
Using the special keywords you can “toggle” the value of a property:
// toggle opacity four times
$('element').gx({opacity: "toggle"}, 2000)
.gx({opacity: "toggle"}, 1000)
.gx({opacity: "toggle"}, 400)
.gx({opacity: "toggle"}, 2000);
// toggle width three times
$('element').gx({width: "hide"}, 2000)
.gx({width: "show"}, 1000)
.gx({width: "hide"}, 400);
Future proofs
Although GX can be currently defined “full-featured”, there are many others features i want to add. First of all, a method which allows to animate multiple elements at once (with some special add-ons). A better “getter” method for retrieve complex CSS values (currently the jQuery.fn.css method doesn’t work well with some complex CSS properties, as ‘border-width’, ‘border-color’ and so on).
Last but not least, i’m developing a new script file called GX.animations which provides new shortcut-methods for creating animations based on the gx methods (expect a ‘fade’, ‘gradient’, ’slide’ methods and so on). Morevover you’ll be able to use the parameters in the desired order:
$('element').slideUp(2000, function(el) {el.css('Done!');});
$('elemen').fadeOut('Bounce', 'verySlow');
// ...
Conclusion
Currently, i’m using the GX engine in collaboration with every jQuery application i created. I’d be very pleased to hear the opinions of the jQuery Gurus about my project, their suggestions, and if there’s some way for it to be integrated with the jQuery Library.
At this point the best thing you can do is download GX and start to play with it. Learning GX and integrate it with your applications will really be a simple joke. Moreover, I’ll post a collection of tutorials that will show the potentiality of GX as well as its hidden features.
Don’t hesitate to post your suggestions, tips, thoughs, doubts, requests, possible bugs and so on!
t...
31 Comments
You left a console.log() on line 193.
Thank you Yanksy, i’ve just removed it (dev version is gone
).
Any chance at a delay parameter? While it could be done manually, being able to specify it similar to the Tweener library for AS3 and other languages would be nice to have. Other than that, looks great, can’t wait to find a reason to use animation in my sites!
Sponge, when i was developing GX, this feature aroused my curiosity, really. However, I decided not to provide GX with a delay option, because I wanted to focus primarily on the simplicity of the animations’ creation and, of course, on the main features a framework must have: code quality, small size, smooth execution and so on.
Moreover, GX is highly customizable and extensible (expect an extension file soon) and new features can be added with ease.
Doesn’t jQuery support all of these features out of the box ?
You are missing an end bracket in the “Complete Callback” section. Just something minor.
That’s really impressive!!
It runs smoothly with every browser i tried it. I think i’m going to use it intensively…
@weepy: jQuery supports some of the features provided by GX. See the third comment on this post on Ajaxian for more informations.
@Austin: what section do you mean? I haven’t found any missing bracket in the “Complete callback” demo.
@Isaac: thanks
Does this support working with svg elements ? It’d be to integrate this with something like http://plugins.jquery.com/project/svg
about jQuery you say: “but the resulting effects aren’t smooth enough”
Do you think that GX’s animation is smoother ?
@weepy: I think that the “smooth” word has more than one meaning. In my opinion GX is more “complete” (or “featured”) than the engine placed in the jQuery core.
I think that any animation can be “smooth”: you have only to tween the value of css properties with a specified speed, and the result will be “smooth”. What really changes are the inner features that compose the engine.
I’ve made a couple of tests and I’m liking it so far.
Only 1 suggestion for the API: stick with 1 single method (gx) for everything.
Eg. replace the following.
$(’#el9′).pause(); => $(’#el9′).gx(’pause’);
$(’#el9′).resume(); => $(’#el9′).gx(’resume’);
Less methods to remember and write, the cleaner your API will be and the happier the end-users/devs will be.
Good job in the plugin.
Regards,
@Moocow: I haven’t tested GX with SVG elements yet, because it primarily provides functionality for working with HTML elements.
You can try it out and report here your test results.
@Joan Piedra: very nice idea. However, it requires a change in the engine’s structure, so I’m thinking to post a poll in the next few weeks to aks about new features/changelogs.
Thank you.
+1 for .gx(’pause’) etc
I think to say an effect is smooth has a very well defined meaning! - ie. it doesn’t jerk.
Right. This one of the meanings, maybe the main meaning. On the other hand, I think that almost all the recent frameworks supports animations that don’t jerk.
I did my best to provide an engine that allows to create super-smooth animations with ease.
Any chance for either supporting Prototype or being library independent?
+1 for .gx(’pause’)/.gx(’resume’)
may I ask why u pollute global scope with Fns and GX, and not use closures instead?
Anyways I am sure I’ll gonna use GX because Jquery’s own animations fails in IE (especially fadeIn/fadeOut).
Thumbs up for the small size.
Wow. That animation is really fun. I can hardly wait to see what people do with it. Add the GX animation library to Firefox’s upcoming built-in audio support and you’ll have the richest non-Flash/Java webapps we’ve ever seen.
Looks like a really good lib!
Thanks so much for sharing.
I haven’t checked the source code yet, but I don’t think it’s such a difficult change.
I will give it a try later on and post a snippet / patch if possible.
Regards,
Haven’t you seen jTweener yet?
@Ran Baron: of course it can be a future proof, GX can be easily integrated with all Javascript frameworks, like Prototype. I have created a similar private version of GX. But the main goal of GX is to be a jQuery engine, so, for now it won’t be jQuery indipendent.
@Joan Piedra: it’s not a difficult action to do, but it consist of a change in the “meaning” of the engine. So, I have to plan it very well. In the meantime, you can share with us your code snippets of course.
@devdanke and at9t: thank you too!
@RIMMER: I haven’t seen jTweener yet, but I’m going to give it a look. However, I won’t include any external snippets into GX engine.
Hello,
Please add your site at http://www.sweebs.com. Sweebs.com is a place where other people can
find you among the best sites on the internet!
Its just started and we are collecting the best found on the net! We will be delighted to have
you in the sweebs listings.
Regards
Kris
Amazing work!!
I’ve just added GX in my jQuery projects and it works very well, i’m lovin’it!
Thank you for sharing!!
This looks great and all the demos run well on the android too. I’ve been looking for a good ppath for a desktop and mobile web game. Thanks
@Calvin Spealman: thank you, I’m glad which Android likes GX too
Moreover, I’d like to see your works with GX when they’re completed.
Demos don’t work, 404 error:
Errore 404
File non trovato
L’indirizzo inserito non è più disponibile oppure è errato. Verifica di aver digitato correttamente dopodichè avvisa il webmaster del problema incontrato.
@ehsanul: thank you. Fixed.