Creating Bouncing Effects with the GX JavaScript Animation Framework

GX is a full-featured JavaScript library created by Riccardo Degni that lets you implement all sorts of appealing animation effects on elements of a web page by using a group of straightforward and highly-intuitive methods. Ranging from dynamically changing the background colors and transparency of CSS selectors, to moving objects programmatically across the browser, GX comes equipped with a powerful set of features that permits developers to create advanced animation effects in a truly unobtrusive fashion.

To reveal the actual functionality that stands behind the API provided by the GX library, in the two previous articles of this series I developed some basic examples that showed how to use its core “gx()” method to animate a sample div. First I modified its width and height individually, and then I altered these properties in conjunction with its background color.

Obviously, these examples are clear evidence that GX lets you alter multiple properties of an HTML element on the fly, which speaks for itself about its remarkable capabilities for creating parallel animations.

In addition, it’s fair to say that the library permits you to easily customize the way that an animation is carried out via the “easing” argument taken by the “gx()” method. In reality, this parameter allows you to produce interesting variations of a classic linear animation, which comes in handy for implementing bouncing and elastic effects.

Therefore, in this third chapter of the series I’ll be taking a deeper look at this "easing" argument. You'll learn how to use it for adding a neat bouncing behavior to elements of your web pages.

Ready to learn more about how to tweak this useful parameter of the GX library? Then let’s get started right now!