JavaScript
  Home arrow JavaScript arrow The GX JS Animation Framework
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

The GX JS Animation Framework
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2010-01-20

    Table of Contents:
  • The GX JS Animation Framework
  • Getting started with the GX animation library
  • Performing basic animation with GX
  • Animating the width and height of a targeted div simultaneously

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    The GX JS Animation Framework


    (Page 1 of 4 )

    If you're looking for something better than Flash for building animations for your web site, keep reading. In this first part of a series, I demonstrate how to perform basic animation on a single HTML element using the GX JavaScript library. This framework offers an easy learning curve, which permits developers to create nice visual effects on web pages via a friendly API. If you've worked with jQuery to add behavior to your websites, then using GX will be even simpler.

    When it comes to performing sophisticated, eye-catching animations on web pages, the first name that comes to my mind is Flash. This powerful desktop application from Adobe comprises the famous Creative Suite of the company, which includes other popular design programs like Dreamweaver and Photoshop.

    Flash has evolved from a rather basic time-lined animation software in the mid-90s to the full-blown application that we see nowadays, capable of streaming videos and interacting with server-side applications. However, it still suffers from some serious issues, mostly related to the search engine optimization field.

    Besides, Flash has a steep learning curve that many are reluctant to climb, and for many web projects that only need to apply basic animation effects on a small number of HTML elements, it can be overkill. Does this mean that all is lost when all you need to implement on your website are simple animations to give your visitors a bit more excitement? Fortunately, the answer is a resounding no!

    As you know, there are numerous JavaScript libraries, such as jQuery, Prototype, MooTools and so forth that already come with handy animation modules. These permit you to create appealing effects by writing just a few lines of unobtrusive code.

    However, if you need to implement even more complex animations without entering into the terrain dominated by Flash, there are some emerging JavaScript frameworks that will handle the work remarkably well. Among these libraries, there is one in particular that I have found easy to learn and use. In this case, I’m talking about “GX,” a full-featured JavaScript framework developed by Riccardo Degni that will let you do all sorts of clever things with your HTML elements. These range from dynamically altering their dimensions, background colors and coordinates, to applying cool fade-in/fade-outs effects, via an intuitive API.

    GX relies on jQuery to leverage its full potential, so if you’re familiar with the basics of this JavaScript library, you’ll find creating animations with GX a breeze. However, the best way to see the actual functionality of GX is by means of some working examples. In this articles series I’ll be exploring the library’s most important features, so you can start exploiting its functionality in a very short time.

    Ready to start learning how to work with the GX animation framework? Then let’s get going!

    More JavaScript Articles
    More By Alejandro Gervasio


       · The GX JavaScript animation framework is a full-featured JavaScript package that...
     

    JAVASCRIPT ARTICLES

    - Dynamic Drop-down Menus: Javascript Progress...
    - Creating Drop-down Menus Using Progressive E...
    - Building Slide Shows Using Progressive Enhan...
    - Form Validation with Progressive Enhancement...
    - Validating Web Forms: an Introduction to Pro...
    - Ajax Progressive Enhancement: Reading Remote...
    - Ajax Image Requests: Progresive Enhancement ...
    - jQuery Image Gallery: Working with Progressi...
    - Progressive Enhancement in an Image Gallery
    - Building a Drop-Down Menu with the HoverInte...
    - Using All of the HoverIntent jQuery Plug-in`...
    - Controlling Mouseout Events with HoverIntent...
    - Using the Interval Argument of the HoverInte...
    - Tweaking the Sensitivity of the HoverIntent ...
    - Introducing the HoverIntent jQuery Plug-in







    © 2003-2010 by Developer Shed. All rights reserved. DS Cluster 8 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek