More information about the Greensock Animation Platform can be found on the official Greensock web page at http://greensock.com/.
# Why using GSAP insted of CSS animations
Browser bugs, inconsistencies, and compatibility: An animation library, like GSAP, solves these for you and is universally compatible. You can even use motion paths in IE9! There are many problematic areas when it comes to cross-browser issues, including handling transform-origin on SVG elements, path stroke measurements, 3D origins in Safari, and many more that we don’t have the space to list.
Easing options: CSS only gives you two control points for eases. GSAP’s CustomEase lets you literally create any ease you can imagine. The library provides you different types of eases and options to give you more control on how your animation should behave. It also provides an Ease Visualizer to help you choose your preferred ease settings.
- Use relative values:Animate values relative to their current value. GSAP recognizes += and -= prefixes for this. So x: "+=200" will add 200 units (usually pixels) to the current x. And x: "-=200" will subtract 200 from the current value. This is also useful in GSAP’s position parameter when positioning tweens relative to one another.
# An example
I am going to give you a simple example how I did a smooth nice image hover animations using GSAP. I've added comments to make it easier for you to explore the code.
Let me give you a short list with the options that you are going to see in this example:
- jumpToRandomPosition: If `true` the particles on every frame will jump to random position. Else the particles will move randomly without jumping. Defaults to `false`
- growAndShrink: If `true` the particles will grow & shrink, it will grow .8 times larger than the radius. Defaults to `false`
- fill: If `true` the particles are filled with the current pixel color that they are on, else they will be stroked for that same color. Defaults to `true`
- bounceFromEdges: If `true` the particles will bounce back when they hit the (specified) edges, or else thay will continue their path from the opposite edges/walls. Defaults to `true`.
- shape: You can specify what shape of the particles. Currently you can specify any one from the following, i.e. "circle", "square", "hexagon". If not specified then it defaults to "circle"
- radius: You can specity the radius of the particles, defaults to "5" if not specified.
- randomRadius: If `true` then the particles will have random radius, else defaults to `false`
- maxRadius: You can specify the minimum radius of the particles, else defaults to "2"
- minRadius: You can specify the maximum radius of the particles, else defaults to "5"
- maxVelocity: You can specify the maximum velocity of the particles, else defaults to "8"
Okay that's it, that's all the options I could add. I would recommend you also to play around with GSAP and see what fits for you.