MANUAL GSAP

1. RESEÑA GSAP

Green Shock Animation Plataform (GSAP) es una serie de herramientas desarrolladas en JavaScript para realizar animaciones con pocas líneas de código, su principal característica es su facilidad de uso y rendimiento.

Las principales herramientas que incluye  GSAPJS son:

TweenLite: Se encarga de la animación de casi cualquier característica de cualquier objeto. Es relativamente ligero pero con todas las funciones extra  se puede ampliar mediante  plugins opcionales (como CSSPlugin para animar CSS con el  DOM en el navegador, o BlurFilterPlugin para animar BlurFilters en Flash, etc)

TweenMax: piensa en el como  “el   hermano mayor de TweenLite”, puedes hacer las mismas cosas que con   TweenLite  ademas de incorporar otras funciones como   repeat , yoyo, repeatDelay, updateTo (), etc Se activa automáticamente en  muchos plugins , también se centra en tener todas las funciones conservando un peso ligero.

TimelineLite: Es una herramienta poderosa que actúa como línea de tiempo para los objetos , permitiendo controlar su puntos de interacción   y  también nos permite anidar líneas de tiempo dentro de otras.

TimelineMax: extiende TimelineLite, ofreciendo exactamente la misma funcionalidad con características más útiles (pero no esenciales)  como repeat, repeatDelay, yoyo, currentLabel (), y muchos más. Al igual que lo hace para TweenMax con  TweenLite, TimelineMax aspira a ser la última herramienta con todas las funciones.

Existen otras herramientas como  aceleración, rutas de movimiento, plugins, herramientas blitting y más.

También podemos ver un  ejemplo de velocidad y rendimiento contra otras librerías como Jquery, Tweeen JS , Dojo , MooTools etc .  GSAPJS sobresale como  ganador.

2. COMO DESCARGAR

Ingresamos al siguiente enlace http://greensock.com/

Damos click sobre el titulo productos (PRODUCTS)

Ingresamos a GSAP:

De este modo descargamos nuestro Minified

La cual descomprimiremos y se visualizaran dos carpetas:

El siguiente paso es crear un nuevo proyecto al que llamaremos

Dentro de este contendrá los siguientes elementos:

Dentro del Index.html digitamos  el siguiente código:

-al crear el enlace Minified debemos de sacar la carpeta Minified y colocarla al principio de este modo

Para que pueda ser reconocida dentro de la carpeta js 

En el Navegador:

La imagen se mueve dependiendo de la velocidad hacia la izquierda.

Adicionando el siguiente código

TweenMax.to (a, 2, {left:"250px", top:"12%", width:"50%", rotation:"720"});

        

La imagen rotara y se agrandara 

Descarga el codigo en el siguiente enlace :