Moving Elements Vertically and Horizontally with the GX JavaScript Animation Framework
(Page 1 of 4 )
In this fifth part of a series on the GX animation library, I develop a couple of basic examples that demonstrate how to move a div either vertically or horizontally. You'll see that it's a simple process of manipulating the div’s “top” and “left” properties.
Encapsulated behind a friendly and intuitive API, the GX framework is a full-featured JavaScript library that will let you create all sorts of animation effects on your web pages without having to sacrifice the cleanliness of your structural markup. You won't even need to appeal to more complex time-lined applications like Adobe Flash and Swift 3D.
Since GX uses the core engine of jQuery to do its business, you’ll find that performing animations with it is very similar to working with jQuery’s native methods. That makes GX even easier to learn.
Of course, at this point I assume that all of these features are familiar to you, since in previous tutorials of this series I explained how to use the GX library for creating single and parallel animations via its handy “gx()” method. As the library’s workhorse, this method is extremely customizable and permits you to achieve relatively complex effects, such as simultaneously modifying multiple properties of a target HTML element and implementing bouncing animations in a simple manner.
All of the examples developed so far have shown how to animate in different ways the width, height and background color of a trivial div. This is useful, but doesn’t tell the full story of the actual functionality that GX packages behind the scenes. Therefore, in the course of this fifth episode of the series I’ll be discussing how to utilize the library for animating individually the “top” and “left” coordinates (or properties) of a given HTML element, thus covering a broader range of use cases.
Now, it’s time to leave the boring theory behind start writing some functional code samples. Let’s go!
Next: Review: creating bouncing parallel animations with GX >>
More JavaScript Articles
More By Alejandro Gervasio
