Therefore, the main goal is to push GX in a new dimension of  Javascript animations frameworks with next release. 

However, there are a lot of things to do, besides developing the software: writing full detailed and downloadable documentaition, writing complex and detailed demos, handling the new Website that will be a lot more Web 2.0, handling the blog (currently not available) and so on. All these tasks are essential to improve the framework quality and the community quality: in a few words, for the software growth.

This is why we are looking for members that could help us out with GX production (yes, we are looking for a Dev Team). Currently we are looking for 3-4 members that should provide the following tasks:

• Creating demos
• Wrinting documentation (engine and relative syntax are already completed)
• Directing the new Website and the Blog (very important!!)
• Helping in the code/software production

If you are intersted in helping us out providing one or more of these tasks (and in sharing your knowledges for creating a new, better and amazing Javascript animations framework), do not reply to this post, but send a mail to riccardo.degni@gmail.com. Otherwise, if you have any question to expose, you can either send a mail or leave a comment directly here.

Until the Dev Team isn’t composed, the GX works are currently stopped.

Riccardo Degni

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 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!

• Friday: 288
• Saturday: 493
• Sunday: 637
• Monday: 894
• Tuesday: 1026
• Wednesday: 1081

I’m very happy to read the data informations placed above and I hope you’ll enjoy GX in all its features.

Now stop talking and let’s start the tutorial!

Handling hexadecimal notations

As you probably have read from the Docs, with GX you can handle CSS colors in a variety of ways, one of which includes the hexadecimal notation, either full and short. See the following example:

// full-hex notation
$('el').gx({color: '#ff00ff'}, 2000, 'Bounce');

// short-hex notation
$('el').gx({color: '#f0f'}, 2000, 'Bounce');

Obviously, both the previous examples will give the same result.

Handling Array notations

Another way for handling colors with GX is to use the Array notation. See the following:

// animate to white
$('el').gx({color: [255, 255, 255]}, 600, 'Elastic');

// animate to blue
$('el').gx({color: [0, 0, 255]}, 600, 'Elastic');

// and so on...

As you can see, using the Array notation can be very useful, like in the case you know exactly the r, g and b percentages (probably it represents the best choice for some particular Plug-Ins based on GX).

Handling Custom colors

The real killer feature of handling colors with GX comes with the Custom Colors, or color keywords. GX has in fact the capability to handle color “strings” or well, “keywords”, and has 5 internal core values that you can actually use: “red”, “green”, “blue”, “black” and “white”.

// predefined color keywords
$('el').gx({'color': 'white',
            'border-color': 'blue'});

Moreover, you can add additional keywords by extending the GX.Color.customColors object, like for example, the CSS standards colors:

// adds the 'fuchsia' and 'aqua' colors
Fns.Extend(GX.Color.customColors, {
  fuchsia: [255, 0, 255],
  aqua: [0, 255, 255]
});

// let's use them!
$('el').gx({'color': 'fuchsia',
            'border-right-color': 'aqua'});

In this code snippet I used the internal Fns.Extend method to extend the GX.Color.customColors object to be more consistent with the GX syntax, but you can extend it in every way.

Of course, if you don’t remember exactly the required Array notation, you can use the GX.Color.cssToRgb method and pass the hex notation as string to it: GX will do the dirty job for us:

// adds the 'coral' and 'chocolate' colors
Fns.Extend(GX.Color.customColors, {
  coral: GX.Color.cssToRgb('#ff7f50'),
  chocolate: GX.Color.cssToRgb('#d2691e')
});

// let's use the new color keywords!
$('el').gx({'color': 'chocolate',
            'border-left-color': 'coral'});

Let’s use our Custom colors!

Although it’s possible to extend the GX.Color.customColors object by adding the standard colors, the amazing feature comes when you add YOUR custom colors!

For example, if you have a template with a specified color scheme and you have to create animations for handling these colors, it can be very tedious to repeat the same operation more than once by writing redundant code as in the following snippet (I picked the color values directly from my template, for the sake of convenience):

// first script...
$('el').gx({color: '#a18385'})
       .gx({color: '#aab3c2'})
       .gx({color: '#a18385'})
       .gx({color: '#aab3c2'});

// second script...
$('otherEl').gx({'background-color': '#a18385'})
            .gx({'background-color': '#aab3c2'})
            .gx({'background-color': '#a18385'})
            .gx({'background-color': '#aab3c2'});

Sure, it’s tedious.

Of course, you can create your personal color keywords and use/reuse them in all the pages of your application. For example, in my case, I created a new file called myGXColors.js that contains my personal custom colors. It’s like the following:

/* myGXColors.js */

// RD Theme Colors
Fns.Extend(GX.Color.customColors, {
  RDviolet: GX.Color.cssToRgb('#a18385'),
  RDdark: GX.Color.cssToRgb('#aab3c2')
});

Then, I put the script in my pages and I’m done:

<script src="jquery.js" type="text/javascript"></script>
<script src="GX.js" type="text/javascript"></script>
<script src="myGXColors.js" type="text/javascript"></script>
<script type="text/javascript">
// ...
// first script...
$('el').gx({color: 'RDviolet'})
       .gx({color: 'RDdark'})
       .gx({color: 'RDviolet'})
       .gx({color: 'RDdark'});
</script>

As you can see, this technique allows you to modularize your code and vastly reduces redundancy. If later, for any reason, you need to change your template or its color scheme, you won’t have to worry about changing values in all scripts, you will only have to update the myGXColors.js script and you’ll be done.

Conclusion

In this tutorial we have learnt how to handle CSS colors with GX in all the features offered by it.

As usual, if you have any doubt, suggestion, tip or whatever you want, don’t hesitate to post them here.

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!

In these pages you’ll find a lot about my projects and my works, as well as my personal opinions about Web technologies, Web programming and, of course, all the related topics.

My blog isn’t and will never be a periodic magazine nor a truly-defined “blog”, it simply represents the preferred way to expose my projects and my opinions to Web.

Now let’s talk about the theme. I developed the blog section of my official Website using Wordpress and choosing to create a usable, simple and funny theme with a dark-toon color scheme. It’s 100% valid XHTML and 100% valid CSS because, as i wrote in my Profile, i love either the standards and all the recent stricts.

I think you’ll find it very simple to use and explore.

I’ll be very glad to hear your suggestions, your tips and your personal opinions about my projects and my topics and I hope you’ll let me know what you think about them!

Riccardo Degni