- The "scrollType" option is set to default "scroll", this mean that the animations will play on each mouse scroll.
- The "touchType" option is set to default "drag", this mean that the animations will play on each touch move.
- The red rectangle animates to left,top.
- The yellow rectangle animates-set to left and animates opacity to 20%.
- The blue rectangle is set at step 5 and then at step 10.
- The blue rectangle has an opacity animation.
- The green rectangle will have a "round" class added on step 5 and on step 5 this class will be removed.
- The green rectangle shows how set@start method works.
- The back rectangle shows how transform can be animated
- The "timeline" for this animation is from step 0 to step 20 because a "max" value was not set and all the elements animate to a max of step 10.
- This animation has a loop.
- The "scrollType" option is set to "jump", this mean that the animations will jump on the steps indicated in "jumpPoints".
- The "touchType" option is set to "wipe", this mean that the animations will jump on the steps indicated in "wipePoints".
- The red rectangle animates to left,top,box-shadow and rotation.
- The yellow rectangle animates-set to left 2 by 2 steps.
- The blue rectangle is set at step 5 and then at step 10.
- The blue rectangle has an opacity animation.
- The green rectangle will have a "round" class added on step 5 and on step 5 this class will be removed.
- The green rectangle shows how static method works and rotates if IE7 & IE8 is found by using external function.
- The gold color rectangle changes his color.
- The "timeline" for this animation is from step 0 to step 10 because a "max" value was not set and all the elements animate to a max of step 10.
- CSS3 is used for this animations.