GSAP en Oxygen Builder - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

GSAP en Oxygen Builder

¿Cómo puedes 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

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
img-6
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:
Instalación GSAP Oxygenados

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.

0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
img-10
Añadir lightbox "Facilmente"

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.

Leer más
img-11
Imagen de Fondo Archivo de Categorías

Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.

Leer más
img-12
Botón de Todos los Templates

Se echa de menos un botón que estando en la sección "Edit Template" nos lleve directamente a la página de Templates que es donde se muestra todo el listado de plantillas de Oxygen, parece que alguien se ha olvidado de este detalle que debería estar implementado nativamente y a veces hasta fastidia un poco tener que cargar dos páginas para llegar ahí estando en la sección de edición de template.

Leer más