Moving Divs Diagonally with the GX JavaScript Animation Framework

Unquestionably, jQuery is by far the preferred tool of numerous web designers, especially when adding dynamic behavior to elements of a web page. Three reasons explain this: first, the library’s learning curve is extremely flat; second, it comes bundled with tons of handy features; and last but not least, it does its business in an unobtrusive manner.

Picking up a JavaScript library can be a relatively simple decision. Things can be more complicated, though, when a certain project requires the implementation of complex animations that are out of the scope of the native jQuery’s capabilities. Fortunately, the solution to this drama (at least for those like me who are reluctant to stray away from jQuery's comfortable API) is only around the corner.

Among the plethora of plug-ins and add-ons that now exist for the library, there’s one that's particularly appealing for its thorough animation features. Yes, as this article’s title suggests, I’m talking about GX, a powerful framework created by Riccardo Degni, which permits developers to create a great variety of animations on web pages without having to leave the friendly environment of jQuery.

Naturally, if you just came across this tutorial, this framework may be new to you. But if you’ve already had the chance to read all of the previous parts of this series, then you already have a solid background in how to use the functionality of GX for animating different properties of a target HTML element.

I left off the last part discussing how to individually alter the “top” and “left” properties of a single div. This process allows you to move it vertically and horizontally across the screen. Admittedly, that’s useful as long as you don’t need to modify the properties in question at the same time. But, does that mean that GX can’t do something as simple as that?

Relax; the library can do that and much more, actually. However, in this sixth chapter of the series I’ll be discussing how to manipulate simultaneously the “top” and “left” properties of a div, so you'll quickly learn the underlying logic of this animation process. Ready to start reading? Then jump right in!