Fading, Hiding and Sliding HTML Elements with the GX JavaScript Animation Framework

Creating engaging animations on your web pages does not always imply that you have to put your pockets (or your credit card) under strain buying expensive software like Flash or Swift 3D. Thanks to the generosity of many developers worldwide, you can pick up a JavaScript framework for free among the numerous ones available on the web, and start turning your divs, paragraphs and lists into dynamic elements.

In reality, at present there’s such a great variety of animation frameworks available that choosing one that fits your needs without overkill can be a challenging task. Fortunately, making the right decision doesn’t have to be a painful experience. This is especially true if you’re a big fan of jQuery; you may want to try GX, a powerful plug-in that will let you implement all sorts of eye-catching effects on your (X)HTML documents without having to mess up a single portion of your clean markup.

Naturally, if you’ve been a loyal follower of this article series and have already read all of the tutorials previous to this one, you now have a strong background in how to use the GX library for creating different types of effects, ranging from altering the dimensions of an HTML element and varying its opacity, to moving it up and down across the browser.

While it’s fair to stress that in most cases these effects were performed via the workhorse of GX, that is its handy “gx()” method, the library comes with a few additional, convenient methods that can be used for animations such as fade-ins and fade-outs, slides and even hiding elements entirely. Therefore, if you’re interested in learning how to put these methods to work for you, in this penultimate part of the series I’ll be taking a close look at them.

Let's start exploring the functionality of these fine animation methods.