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.