RD - riccardodegni.net | Blog

The new GX package is now available! This is a recommended upgrade for all users who have previously downloaded GX.

IMPORTANT: we’re building out a list of resources that use GX. Therefore, if you are using or will use GX for your Websites, projects and/or applications, please report them to us. It can either help us out to discover new features/usages and help you to share your works.

Now let’s see the new features!

GX Core

Multi-element animations

This new release of GX increases the internal power of the Core engine, for handling very complex DOM multi-element animations with single function calls.

While testing GX, Christop Stickel has noted that GX didn’t handle complex multi-element animations that needed mulitple DOM operations which may include the same elements.
For example, if in a page we have 3 divs, it’s perfectly legal to animate all divs simultaneously and a specific div, for example the one with the id “#el2″.
That element appears in both the two set of elements (”div” and “#el2″), so the second animation didn’t fire correctly.

Another case could be a multiple-element animation that involves the use of relative values.

This happened because GX haven’t been designed for handling multi-element animations. As I said a while ago, it would have been an additional task provided by a Plug-In.

By now this isn’t needed anymore: with the release 1.2 that feature is included directly in the Core engine. This is a very important point: first of all, since this a part of the Core, it’s available with all the GX extensions (as GX Extras). Secondly, you don’t have to worry about downloading a lot of scripts… it’s all in one place.

How GX handles multiple element animations

I have slightly modified the core engine and added additional features for handling all the multi-element animations you need, in a super-comfortable way and with all the features provided by GX. If you’ll use GX with single-element animations, you won’t notice any difference: the behaviour is perfectly the same.
The difference comes when you handle multiple-element animations, as the ones I described above. Now all elements are handled correctly, doesn’t matter the DOM set they belong to.

All elements will have a well-defined animation’s state that keeps track of all their features. Now, a totally new universe of animations could be realized!

To better understand this concept take the example I mentioned before: when you animate all the “div” elements of your DOM with $(’div’), a single instance will be created for each element in the DOM set. After (or simultaneously) you’re going to animate a single div element, the one with id “#el2″ by writing $(’#el2′). The instance that keeps track of the this element’s state has been already created with the previous function call, so it will be reused.

This has two important consequences: firstly, the resource will be saved. Secondly, but not less important, the animation’s state will always be well-defined: you’ll be able to queue, cancel, pause and resume single or multiple set of elements with the expected results.

Take a look at these two examples which explain these concepts well:

• Multiple over-out animation menù (note the differences with the jQuery Core engine)
• Multiple element animation using relative values and different transitions
• Multiple element animation using different Extra methods

Another killer news is that the size has not changed: it’s 10kb uncompressed!

Obviously, multiple-element animations use up more resources than a single-element animations, so use it with care, and remember: “with great power, comes great responsibility”.

New kind of animations

As you could see, an infinte number of complex animations can be realized writing, as usual with GX, less code than any other script.

For example, take the case in which you want to animate simultaneously all the divs in the page with a Linear transition, except the second div, that have to be animated with a Bounce transition, and you want to do this in a single function call.

This is possibile with GX:

// we want a Bounce transition for the second div
$('#el2').gxInit({easing: 'Bounce'});

// animate all divs in the current DOM. All divs except the second will have
// a Linear transition
$('div').gx({width: '+=100px'}, 1000)
	.gx({height: '50px'}, 2000);

Another good example could be a multiple-element animation in which when you click on a div, it’s height increases by a relative size and simultaneously the height of all the other divs decreases, to see what div has got more clicks:

// assume that the div gets the right class name
$('div.hovered').click(function() {
  $(this).gx({'height': '+=50px'});
  $('div:not(.hovered)').gx({'height': '-=50px'});
});

Of course, all the new multi-element animations you could realize with GX Core, can be realized with the methods provided by GX Extras:

// fades all divs out
$('div').fadeOut();

// and then fades the div with id #el3 in after completion of the previous animation
$('#el3').fadeIn();

Or again:

// scale all div increasing their current widths and heights. Then move them
// by a relative value
// NOTE: all starting/ending points vary from div to div
$('div').scale("+=100px", "+=100px")
        .move("+=200px", "+=200px");

So really, there’s no limit for animations.

Minor improvements

The full multi-element animation support is clearly the main feature of this new release, but I made some others minor improvements, especially in the speed/performance scenario. Here we have a quick list of the main changelogs:

• GX can now be used when jQuery is run under compatibility mode. For example, you can use GX with jQuery and Prototype placed in the same page. (thanks Christop Stickel for suggestion)
• The engine of the 1.2 version is faster than the previous one, now function calls are made only where they’re absolutely needed.
• The element is initialized only the first time the gx method is called, by the new internal init method. The element locking is no more required, with the result of speeding up the things.

GX Extras

• The GX Extras engine has been improved internally to be faster and lighter.
• With the new GX Core engine, all the extra methods can be used on multiple set of elements, as learnt before.
• The scale method has been added for scaling element’s sizes (width and height) with ease.
• GX Extras engine can now be used when jQuery is run under compatibility mode too.

1.3 will bring…

Amazing features are being planned for GX 1.3. First of all, performances. All possible improvements in the performance/speed scenario will be studied and provided. Furthermore, a new queue system is being planned and tested, to observe what kind of improvements could be added to the Core.

A large collection of new Extra methods will be added, to cover all possible next-gen animations you can need for (as, for example: shake, switchOff, fold, …). Too kb? No way! You’ll be able to insert only the extra methods you want with the GX Extras Download Builder!

As usual, please, post here your considerations, tips, suggestions, requests and reports that can absolutely help us out.

GX, Javascript GX, Javascript, RD, Softwares