Biblioteca de animaciones GreenSock

GreenSock es una biblioteca de javascript optimizada para la creación de animaciones para los sitios web y las aplicaciones móvil.

Se instala incorporando el archivo de javascript básico:  gsap.min.js y después vas añadiendo el código para cada animación en tu archivo de javascript .js

Este archivo de la biblioteca GreenSock lo puedes descargar de su sitio web:

O puedes usar un cdn como Cloudflare:

<!– Greensock –>

<script type=»text/javascript» src=»https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js»></script>

En su sitio web tenemos muchas información, ejemplos y la guía básica para aprender a animar.

ScrollTrigger de GreenSock

Además es muy interesante un plugin que añade funcionalidades extra a GreenSock y que se llama Scroll Trigger.  Sirve para hacer animaciones que se desencadenan cuando el usuario hace scroll con su navegador.

Igualmente, se puede descargar o se puede utilizar el script desde un cdn:

<!– Greensock ScrollTrigger  –>

<script type=»text/javascript» src=»https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js»></script>

La galería de demos de este plugin está en:

CSSPlugin de GreenSock

Y otro plugin interesante es el CSSplugin para GreenSock que permite profundizar más en las animaciones CSS, por ejemplo transformaciones CSS más complejas y con fotografías.:

  <!– Greensock  CSSPlugin –>

 <script type=»text/javascript» src=»https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/CSSRulePlugin.min.js»></script>

Con todo esto, si necesitas añadir muchas animaciones en un sitio web, la herramienta ideal es una biblioteca como GreenSock, pero primero tienes que aprender a usarla con las ayudas de su sitio web.