WordPress es un sistema de gestión de contenido muy versátil que nos permite crear sitios web de forma rápida y eficiente. Con herramientas como Divi Builder, diseñar sitios web responsivos, modernos y optimizados se vuelve casi instantáneo, ideal para quienes buscan un proceso ágil. Sin embargo, cuando queremos llevar nuestro sitio a otro nivel en términos de interactividad y dinamismo, herramientas adicionales como GSAP en Divi se vuelven imprescindibles.

GSAP

GSAP es una excelente libreria de animaciones, que nos extiende un API muy sencillo de utilizar para crear animaciones altamente personalizables que pueden llevar nuestro sitio de bien a excelente. En este blog post te explico como instalar y como utilizar esta increible libreria para todos tus sitios en WordPress.

Instalación

WordPress Child Theme

Existen varias formas de instalar GSAP, explicadas en su documentación. En mi opinión la mas facil es crear un child theme, lo cual ya hemos hecho por tí y podes descargar aqui (link pending). Esencialmente, la ventaja de tener un tema child es el desacople del tema original, por lo que no nos debemos preocupar que alguna actualizacion al tema original afecte nuestro codigo.

Además, el child theme puede aprovechar cualquier optimización del servidor web tanto como del PHP de tu proveedor de hosting.

Instalación temporal

Si quisieras probar utilizar GSAP en tu sitio sin tener que cambiar el tema, es posible agregar el código a continuación al principio de todas las secciones de código.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

Creando efectos

Una vez hayas instalado el script principal de GSAP, con cualquiera de los metodos de arriba, podemos empezar con el verdadero objetivo: Animar nuestro sitio web.

Para empezar, utilizaré un template pre hecho de Divi, asumiento que éste es el sitio al que quiero agregarle efectos.

Tengo este landing page de ejemplo y me gustaria animar el arte circular para que gire constantemente. Usualmente, deberia buscar el efecto deseado en la documentación, pero en este caso he encontrado un ejemplo exacto de lo que quiero hacer en el sitio de GSAP.

La grán ventaja es que a partir de este momento el trabajo restante es practicamente copiar el codigo que vemos en los ejemplos. De todas formas pongo todos los pasos que seguí yo que puedas seguirlos y asegurarte que funcione correctamente.

Agregando un ID a mi elemento

GSAP puede animar cualquier cosa, para esto es esencial que la libreria pueda saber exactamente qué elemento deseo animar. En seguida te muestro como agregar un ID de CSS a un elemento en Divi para poder referenciarlo en el código que copiaremos.

1. Selecciona configuración en el elemento seleccionado.
2. Despues seleccionamos el tab de configuración avanzada
3. Desplegamos la pestaña que se llama CSS ID
4. Escribimos el ID en el campo. (un nombre único por elemento que puede tener letras, números y guiones).

Aquí te dejo estos pasos sencillos en un video corto.

Agregando el código de animación

1. En cualquier parte del sitio, crea un bloque de código. Puede usar el mismo para todos los efectos del sitio.
2. Si utilizas el método de instalación CDN debes pegar el código del script de arriba.
3. Crea un tag HTML de script y dentro de el puedes pegar el código de tu efecto deseado.
4. Asegurate de cambiar el ID del efecto por el ID que le has puesto a tu elemento.
5. Guarda tu sitio y confirma que tu efecto se aplica correctamente.

¡Y listo!

Te dejo aquí como queda el efecto aplicado a mi elemento seleccionado. Espero que este corto tutorial te sirva y quedo atento a cualquier comentario o pregunta que puedes hacer a traves de nuestro contacto, con esto hemos logrado utilizar GSAP en Divi.

Gracias, espero te haya servido.

Juan Pablo mora