El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.
¿Que es GSAP y para que 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
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í:
Click para Copiar
Copiado
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:
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.