This demo illustrates the following concepts:

• How to use Raphael to create and manage SVG objects. This demo still uses jQuery to attach events to the SVG element. However, Raphael is used to create the circles and maintain the settings of those elements.
• How to use the TweenLite Raphael plugin to animate SVG objects. SVG objects require using attributes to set the visual styles so the CSS plugin won't provide the required behavior. The plugin utilizes the Raphael Element.attr() and Element.transform() functions to manipulate the SVG elements.
• How to use TimelineLite to easily build very customizable animation sequences. Since the timeline object allows for labels, animations, and functions to be added to the timeline. You have incredible flexibility to create very complex sequences with very little code.
• This demo has the same functionality of the jQuery version. I wanted to compare the readability the TweenLite and jQuery implementations. The code is clearly split between the animation definition and the actual control logic. This makes it very easy to see how the animations are sequenced and allows for better documenation of those sequences. The control logic becomes very simple and only needs to move the play head to the correct label to control the animations.

Hold the mouse down anywhere on the page to charge the wave. Release the mouse to emit the pulse wave outward from the selected charging point.