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.

Read more…

GX, Javascript GX, Javascript, RD, Softwares

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)

Read more…

GX, Javascript GX, Javascript, RD, Softwares

Before starting the tutorial, I would like to thank Dion Almaer of Ajaxian for his kidness and for having dedicated a post about the GX framework (which I appreciated very much) as well as all the users that downloaded and are downloading GX in these days. I’m glad to report here the responses directly from the Download Counter:

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

Read more…

GX, Javascript, Tutorials GX, Tutorials

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.

Read more…

GX, Javascript GX, Javascript, jQuery, RD, Softwares