What's inside GSAP?
GSAP is an animation platform which consists of basic tools and many plugins that facilitates the process of creating animations.
TweenLite
This is a really quick, easy and flexible tool for animation.
TweenMax
A tool that extends the capabilities of TweenLite by adding such new functions as repeat(), repeatDelay(), yoyo(), updateTo() and many others.
TimelineLite
It is a kind of container where you place your animation due to the timeline.
TimelineMax
Extends the options of TimelineLite, by adding such new functions, as repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() and many more.
Create Your First TweenLite Animation
EXAMPLE#1
TweenLite.to ( [target object], [duration in seconds], [destination values] )
Animation runs from 0 to 600px during 1 second.
EXAMPLE#2
Adding Easing.
Easing allows you to change the speed of your animation over time.
EXAMPLE#3
From Tweens.
Animate a property from a given value to its current value.
EXAMPLE#4
Animate Multiple Targets With One Tween.
TweenLite can accept an Array of objects as the tween's target.
Use jQuery with GSAP JS.
For your convenience, use jQuery to select single or multiple elements that should be animated.
EXAMPLE#5
Repeat a Tween any Number of Times.
TweenMax allows you to set repeat, repeatDelay and yoyo properties.
Yoyo:true - the animation changes smoothly from the starting point to the set one and backwards. To make the cycle endless, you should set up repeat:-1.
EXAMPLE#6
Stagger Multiple Animations.
TweenMax's staggerTo() and staggerFrom() methods generate multiple animations with staggered start times.
