GreenSock Animation Examples

This provides examples of GreenSock animations. It uses file: TweenMax.min.js with easing function return values (0.0 thru 1.0) onUpdateParams to animate svg elements.

01 Animate Pause/Play This is a continous running animation via repeat:-1, translating a rectangle in the x direction. Then it smoothly returns back to its original value using yoyo:true. It includes controls paused(true/false).
02 Draw Spiraled Lines This is an example of the GreenSock animate during() function. This example animates lines drawn along a spiral using a setter function.
03 Animate Drop & Roll Animation Drop or Roll. This example animates a circle's cx(roll) or cy(drop) values. The object will seem to be effected by some force to move it, then bounce a few times at its destination.
04 Sine Wave - Full Cycle Continous running animation of a sine wave, using parametric equation to build a polyline. It runs a full cycle.
05 Animate Follow Path An ellipse element follows a path, aligning along the path tangent.
06 Draw SVG Shapes This demonstrates how to animate the drawing of typical svg shapes: circle, ellipse, rect, path, line, polyline, and polygon.
This uses files: TweenMax.js and DrawSVGPlugin.js
07 Animate Transforms This example rotates and transforms two <g> elements and draws an attached line. The transformation moves a circle and attached line counter-clockwise around the edge.
08 Pendulum Clock Pendulum uses 4 cycles of linear easing. Two lines are rotated to simulate a clock's pendulum and its second-hand.
09 Draw SVG Elements Simultaneously Various animations are running smoothly at the same time, and in sequence. Using a polyline to simulate drawing. This example draws circles, lines, and ellipse.
10 Animate Polygon Sprites There are 30 sprites placed in a <defs>. Each sprite is comprised of a <g> element containing polygons created with their centers at (0,0) and sized at 1 pixel. Therefore they can be seamlessly transformed, making them ideal for animations.
11 Animate Many Elements Creates inline svg with many random circles, ellipses, polygons, and rectangles and animates each element: Zoom out/rotate + Zoom in/rotate

This uses file: TweenMax.js
12 Animate SVG Buttons Each button has an svg root and associated elements. They are each transformed to fit the button. Clicking the button will animate color and size.
13 Animate Race Cars Five(5) 'cars' race each other around an oval track for a preset number of heats. Each race is won by the car with the best average speed during all heats. It uses two animation objects: movement to start positions, and each heat.