Home arrow JavaScript arrow Producing Elastic Effects with the GX JavaScript Animation Framework
JAVASCRIPT

Producing Elastic Effects with the GX JavaScript Animation Framework


In this seventh part of a series, I develop a couple of examples that show how to create elastic animations by tweaking the “easing” argument taken by the familiar “gx()” method of the GX library. The use of this parameter was covered in earlier chapters when I explained the implementation of bouncing animations, so I think that understanding how to put it to work for you should be a pretty painless experience.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
February 05, 2010
TABLE OF CONTENTS:
  1. · Producing Elastic Effects with the GX JavaScript Animation Framework
  2. · Review: animating simultaneously the top and left properties of a div
  3. · Creating elastic animations with GX
  4. · An elastic effect with a parallel animation

print this article
SEARCH DEVARTICLES

Producing Elastic Effects with the GX JavaScript Animation Framework
(Page 1 of 4 )

If you're a web designer searching for a full-featured JavaScript library that will let you implement a great diversity of engaging animations on your web pages without having to compromise your pristine markup, then you should take a closer look at GX. This powerful animation framework can easily be stacked on top of jQuery to create all sorts of appealing visual effects on HTML elements.

Hidden behind a friendly API, the GX library packages a surprising amount of handy characteristics that permit you to animate multiple properties of a target element, in most cases via its core "gx()" method. However, to simplify the execution of certain common effects, such as fade-in/out transitions, slides and movements, GX also comes with a set of additional methods that will do the hard work for you.

For obvious reasons, attempting to cover all of the rich features offered by the library is nearly an impossible mission. Therefore, in this article series I decided to cover only the most relevant ones, so you can start using them in many productive ways without the need to spend long hours reading the official documentation.

I left off in the previous part discussing how to take advantage of the functionality provided by the aforementioned "gx()" method to move a div diagonally on the browser. This was accomplished by altering the div's "top" and "left" coordinates at the same time. However, GX is capable of doing many more useful things, such as performing pretty realistic "elastic" animations. In this seventh chapter of the series, I'll be exploring this handy feature by presenting a decent number of functional code samples.

Ready to learn how to make your HTML elements behave like elastic structures on your web pages? Then don't hesitate anymore; start reading right now!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials