GX 1.1 and GX Extras are come
Today there are two great news: either the version 1.1 of the GX framework and the its extension called GX Extras are now available. In this post I’ll expose either the major changesets that affected the previous version and the new features, and I’ll explain how to use them properly.
GX 1.1
This new release brings many changes, especially in the API usage/naming. Now the engine is more consistent and the size is.. smaller! Right, the incredible super tiny size of the previous version has been reduced: now the uncompressed version weights about 10.0kb , against the 10.4kb of the 1.0.
Now let’s talk about the changesets:
- the gxPause and the gxResume methods are gone in favor of the gx method, that is the unique method for creating, pausing and resuming animations. You can now pause and resume your effects by writing the following:
// pauses an animation $('myEl').gx('pause'); // resumes an animation $('myEl').gx('resume');The API is now more solid and less verbose.
- there are no more aliases: the anime method is gone.
- the new delay option is now available (see a demo): you can delay all the animations in the queue by specifing the “delay” option. In opposite to the standard behaviour, where animations are fired immediately one after another, with the delay option you can delay all step in the queue:
$('myEl').gxInit({delay: 2000}); $('myEl').gx({width: 200}, 4000) .gx({width: 0}) // after 2000ms (+4000ms of the previous ring) .gx({width: 400}) // after 2000ms (...) - the GX Extras API has been added (see below)
GX Extras
As previously mentioned, the new GX.Extras.js script is now available and downloadable directly in the GX’s home page! It wheights about 2kb compressed with the DE Packer (is about 3kb uncompressed) and contains extra methods for creating animations based on GX, in the easiest way you can imagine. That collection of methods (12 in total) includes:
- fade, fadeIn, fadeOut, fadeToggle
- slide, slideIn, slideOut, slideToggle
- show, hide
- gradient
- move
IMPORTANT: some of these methods will overwrite the ones placed in the jQuery core that have the same namespace.
The main goal of the GX.Extras.js script is to provide an easy and comfortable way for creating animations based on common practices that a Javascript user usually meet in their works, writing less code than each other framework currently available on the Web, and with the full support of all the features provided by the GX core.
Let’s see the features offered by these new methods.
Arguments’ freedom
With GX.Extras.js you’ll get the capability to build super powerful animations and you’ll be able to pass the arguments you need in the order you prefer. Look at the following example:
$('myEl').fadeOut(2000, 'Bounce:Out')
.fadeIn('Elastic', function() { alert("Completed!"); })
.fadeOut()
.fadeIn('verySlow');
Super simple, isn’t it?
In addition, you can use the shortcut methods as fade, slide and gradient, where you have to pass the “mode type” as the first argument and an array that contains the preferred options as second:
$('myEl').fade('out', ['slow', 'Back:InOut'])
.fade('in', [function() { alert("Done!"); }, 2000])
.gradient('#f0f', [1600])
.slide('toggle');
As you can see, you could queue an infinite number of methods to build out a rich and powerful sequence of animations, easily and with all the features provided by the GX core of course.
The “mode”
Another important feature of the GX Extras engine is the “mode” option. It depends on the method you are using and allows to completely alter its behaviour. For example, with the methods of the “slide” family, you can use either the “vertical” (default) and the “horizontal” mode. With the gradient method you can use either the “bg” (default) or the “fg” mode and so on.
// this will slide our element vertically, with a height transition
// (default behaviour)
$('myEl').slide('toggle', [1400, 'vertical']);
// this will slide our element horizontally, with a width transition
$('myEl').slide('toggle', [2200, 'horizontal']);
// this will change the bg color of our element (default behaviour)
$('myEl').gradient('#f0f', [1400, 'bg']);
// this will change the bg color of our element, too
$('myEl').gradient('#f0f', [1400]);
// this will change the fg color of our element
$('myEl').gradient('#f0f', [1400, 'fg']);
As you can see, there can be different behaviours in one method, all in 3kb uncompressed. Obviously, you can learn what kind of keywords is required by every methods by reading the detailed documentation.
Now that we have learnt how to use the methods provided by GX.Extras.js, let’s see them!
Show/Hide capability
The show/hide functionality is one of the most used by jQuery/Javascript programmers. Therefore, the GX Extras provides a solid mechanism that is very similar to the jQuery’s one. If you pass the duration to these two methods, they’ll show/hide elements with an animation, otherwise they’ll show/hide elements directly (and further arguments will have no effect).
Fade capability
With the methods of the “fade” family you’ll get a full-featured set of functionality for fading elements. You can choose from the the standard fadeIn, fadeOut and fadeToggle methods or the shortcut method fade.
Slide capability
As for the “fade” familiy, the “slide” family of methods provides a complete set of functionality for sliding elements, either vertically and horizontally.
Gradient capability
This is a very useful shortcut that allows you to change the bg or the fg color of your elements wrinting less code than you can imagine.
Move capability
Another important shortcut is the move method: it allows to move every element of your pages on the x/y axis without the need of additional checks:
// move the element to another position and then restore its original position within 6000ms
$('myEl').move(100, -240, ['Bounce', 2000])
.move(0, 0, [4000]);
Sizes
The super small size is and will be always one of the main features of GX and its related extension. Now the final size of the core engine is smaller than the previous although new features have been added. The following are the sizes of GX’s scripts compressed with the DE Packer (you can apply GZip too — for a total of a couples of kb):
- GX.js: 5kb
- GX.Transitions.js: 2kb
- GX.Extras.js: 2kb
Conclusion
In this new representation of the GX engine I kept in mind some of the suggestions you have previously written in the first post about GX, that I found very interesting as weel as useful, especially the tip of Joan Piedra about the pause/resume API and the request of sponge about the delay option. GX is, in fact, an open-source project and I’ll always be glad to hear your suggestions and your tips, as weel as your opinions that aims to make a better product.
So, don’t hesitate to let me know your thoughts in the comment box!
t...
23 Comments
I hate to start the comment thread with bad news, but you’ve got something out of place in the dowload widget: selecting GX.extras.js and ‘packed’ gives a PHP warning.
@djn: I’ve just fixed that issue, the missed file is now in the right place. Thank you for reporting it. Let’s know your thoughts!
Peace
it’s a good animation framework, thanks for sharing it with us and for the good job
another wonderful js lib!
thanks for creating this.
I’m not sure how i feel about the fact that you used the packed compression, isn’t jQuery stopped using it because of performance problems?
@Yassine Dawdy and 工作圈: thank you guys.
@Cedric: yes,jQuery has removed the DE packed version, in favor of the normal minified version. I planned to provide a multiple choice of packers, YUI included. But from a GX perspective, the difference in the performance isn’t so strong.
If you want, write here a small list of packers you’d like to use in collaboration with GX. The most voted will be officially included.
Are you going to build out the definitive JS framework for animation?
Very impressive…
thanks for sharing with us.
This is really phenomenal stuff.
I was wondering about new or missing features, but you’ve killed me… it works very well in every circumstance.
GX has had a great impact on the Javascript world, congrats and thanks for sharing.
hi,
i think i’ve found a bug. is there a bugtracker for GX, or is this the correct place for a bugreport? here’s a simple demo page that shows the buggy behavior:
http://vertexten.de/gxbug/
the first 3 columns are animated with GX and every column shows a different wrong behavior. the 4th column is animated with jquery animate, this column works correct and shows what’s expected.
besides that bug, it’s a really nice plugin, thanks!
oh, sry… “rows” instead of “columns”
@christop: thank you for the report. Can you explain the main goal of your script? I wonder that you want to animate all the cells but the one hovered by the mouse, isn’t it?
However, I don’t think this is a bug of GX, beacuse GX is fully tested with multi-element animations: http://www.riccardodegni.net/_demos/gx/GX_multi.html.
Can you try with a simpler example (without callbacks that make debug harder) and post here the results?
yes, i tried to animate all elements except the one fired the event (found the bug, as i tried to darken each image on hover which is not hovered, very nice effect in a thumblist
).
in this example a flag to seperate the hovered element from the others is used. i tried it without a flag comparing the elment directly in a .each loop, too. same problem.
it’s not a general multi element animation bug. i’ve made some working multi element animations with GX. i think it’s a GX bug, because with builtin jQuery .animate() it works exactly as expected.
I can make other examples, but i don’t how to make it more simple. to demonstrate the bug i need an event and events in jQuery need callbacks, don’t they?
if you explain me more detailed how i can make a better example, i will do.
maybe you can try it for yourself. take 3 elements with a color and if you hover one of them change the color of the 2 others.
i’ve made a more simple example, hope that helps:
click on the divs
http://vertexten.de/gxbug2/
this example is just to show that something is wrong. the first example is more detailed. don’t know why the wrong behavior changes if .gxInit({queue: ‘cancel’}) is called at another location. this problem isn’t shown at the secound example.
@christop: you’re right, it’s a bug (very hidden!). But don’t worry, I have already learnt where it’s located.
There’s a line in the GX engine, that provides the elements’ locking:
if(!this.element) this.element = element;So, the first matched element will always be the same. This only occurs when you want to animate all elements except the element that previously fires the animation, as in your example.
Thank you for have discovered a hidden bug! I will release a patch (1.1.1) that fixes that issue.
ok, good!
but does this fix all the problems in the first example?
why do the first 2 rows have a different behavior?
what you explained matches the behavior of the secound row, but what’s with the secound and third row? in these two rows not the element of the first animation is used all the time.
is it wrong to use .gxInit({queue: ‘cancel’}) multiple times, like in the first row?
@christop: setting the queue to cancel doesn’t matter in any way: the issue is due to the elements’ locking, that fires the hidden bug in the cases you tried out.
Of course, with the new patch, multi-element animations won’t have that issue anymore
hum, i still don’t know, why the first 3 rows differ in their behavior.
but doesn’t matter… i’ll try it again as soon as the new version is released.
thanks!
UPDATE: after having tested and analyzed all possible situations, we can definitely say that THIS IS NOT A GX BUG — thank you Christop for the fully detailed reports.
This is the correct behaviour, since GX has been designed to work with single DOM elements: it allows to have the best performances possible.
For very complex situations that involve very complex multi-element animations, I’m planning an extension (like GX Extras), that of course will have all the GX’s features, as I said a while ago.
Therefore, if you need to build out these complex multi-element animations, you’ll be able to choose the additional method for handling multiple elements, that won’t impact on the Core size.