Instalación de GSAP en WordPress. Como animar con GSAP en Oxygen Builder.

¿Qué es GSAP y para qué se usa ?

Según su desarrollador GSAP es un robusto conjunto de herramientas de JavaScript que convierte a los desarrolladores en superhéroes de la animación. Te permite crear animaciones de alto rendimiento que funcionen en todos los navegadores principales. Animar CSS, SVG, lienzo, React, Vue, WebGL, colores, cadenas, rutas de movimiento, objetos genéricos ... ¡cualquier cosa que JavaScript pueda tocar!

Y no existe nada más cierto que esa definición: te convierte en un superhéroe de la animación

Porque utilizar GSAP

La mayor ventaja según mi criterio que tiene esta librería desarrollada por los chicos de Greenshock es lo tanto que abarca y lo poco que pesa, dándonos las herramientas para crear cosas extraordinarias como las que podemos ver en este enlace.

Instalación de GSAP

La instalación de GSAP es realmente sencilla o bien puedes insertar la librería mediante su CDN o puedes descargarla, subirla a tu servidor e instalar desde ahí. En este tutorial vamos a instalarlo mediante el CDN, que es la forma más sencilla que existe y durante el tiempo que llevamos usando esta librería nos hemos dado cuenta que carga su CDN está muy bien optimizado dando un tiempo de carga realmente insignificante para la optimización de nuestra web.

Como introducir el CDN de GSAP en Wordpress

Para este paso vamos a utilizar el plugin Advance Scripts que si llevas tiempo leyendo este blog sabrás que es uno de nuestros favoritos, si aún no lo tienes puedes comprarlo pinchando (este es un enlace de afiliado). Para obtener el enlace de instalación del CDN de GSAP nos dirigimos a su documentación, pero ya que estás en este tutorial te lo dejo aquí:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>Copiar


Ya una vez con el enlace y el plugin Advance Scripts instalado, nos dirigimos a AS y creamos un nuevo código. Este puede ser de dos formas tanto HTML como JS, generalmente uso JS y lo subo mediante la URL, para usar HTML solo debes copiar la línea de código dejada anteriormente. En la foto siguiente te dejo como quedaría mediante JS:
instalación de gsap oxygenados

También pinchando sobre el botón de abajo puedes descargar la configuración para la versión 3.7.0 que fue la utilizada en este tutorial e importarla directamente desde AS:

Descargar Configuración

Como usar GSAP con Oxygen

Si ya conoces un poco sobre Oxygen sabrás que las animaciones que están integradas en el editor son mediante la librería de Javascript Animate On Scroll (AOS) y que esta como su nombre lo indica solo te permite hacer animaciones al hacer scroll por tanto como ya supondrás para hacer nuestras animaciones con GSAP vamos a utilizar códigos de JS, y la forma correcta de hacerlo es utilizando el widget llamado Code Block, vamos a la barra de búsqueda situada en la parte superior izquierda y escribimos Code Block, esto nos permite introducir códigos PHP/HTML CSS y JS , por defecto viene un código PHP el cual comentaremos con // en su parte inicial para que no influyan en nuestro código, el CSS no lo tocaremos ya que nuestra librería de animaciones es de JS, por lo tanto ahí es donde introduciremos el código para nuestras animaciones.

Conclusiones

Si ya llegaste hasta aquí debes tener funcionando GSAP en tu sitio web, para comprobar esto, cargamos nuestra web y le damos inspeccionar, luego nos dirigimos a la sección de Consola y veremos que ha cargado la librería. En proximos artículos enseñaremos como hacer alguenas animaciones utilizando esta librería.

databasefile-emptyrocketthumbs-uplayers