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 :
