GSAP stands for Greensock Animation Platform. It is a suite of tools for scripted, high-performance HTML5 animations. It works in all major browsers. GSAP consists of some special utilities like SplitTextField, BlitMask and quite unique plugins like ease (including CustomEase and RoughEase).
The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:
TweenLite: TweenLite is great for simple animations of one or a few elements. The core of GSAP, animate any property with number value e.g. width, height. With CSSPlugin you can animate any CSS property e.g. fontSize, backgroundColor.
TweenMax: TweenMax extends TweenLite thus becoming most powerful tool. It support most of the feature like repeat(), repeatDelay() etc..
TimelineLite: TimelineLite is great for sequencing multiple tweens. The container for multiple tweens or timelines. Pause, reverse, restart, speed up, slow down, seek time, add labels and more.
TimelineMax: TimelineMax is great for advanced sequencing of multiple tweens and timelines. TimelineLite functionality plus repeat, yoyo, tweening to previous or next label, custom callback functions and more.
I am going to cover some part of the TweenLite tool below:
TweenLite : TweenLite can tween ANY numeric property of ANY JavaScript object, not just a predetermined list of properties of certain object types.
The first parameter is the target.
The second parameter is the duration in secs.
The third parameter is an object with one or more properties that should be tweened to the provided values
The first step is to include the TweenLite JS file.
Below is the link of the TweenLite JS file:
To understand the working of TweenLite, I am going to take a example:
Suppose this is the html part:
Here is the script part:
When you run the file, the output appears like this:
The image gets smaller upto 100px width and height from the 300px width and height.
The image gets rotated 360 degree as we are using rotation property here.
The image gets shifted in x-axis upto 542px from 0 and background also gets changed with the delay of 7 sec.
Same as above, there are multiple functions for TweenLite.
Advantages:
- Not to worry about cross browser properties inconsistencies and dependencies.
- Even If a property does not support in a specific browser, it will silently fail.
- Transition and animation effects work smoothly in IE9.
- Animation effects are 20X times faster than in JQuery.
- Supports DOM elements, canvas library objects, Generic objects and much more.
Conclusions:
The animations effects created by GSAP are compatible with all the modern browsers and thus relieving you from the headaches of cross browser compatibility.
