Logo Oxygen Builder How To

8 - Cómo utilizar GSAP con Oxygen Builder

Content

Descripción

Como sabemos Oxygen Builder precinde de los temas y con ello del archivo function.php, a través de él podemos añadir funcionalidades extra (tal y como hacen los plugins) a nuestro tema.
Afortunadamente tenemos varias opciones para subsanar esa omision, siendo una de ellas las que vamos a explicar a continuacion.

Instalar Plugin My Custom Funcionality

Puedes ver esta entrada para saber el procedimiento agregar-archivos-css-y-javascript-en-oxygen-builder

Editar archivo plugins.php

Oxy How To Oxygen Builder
Por medio de un cliente FTP o del administrador de archivos que proporciona el provedor de hosting editamos el archivo plugins.php que se encuentra en /wp-content/plugins/my-custom-functionality-master

Agregar codigo a plugins.php

Oxy How To Oxygen Builder
Agregamos dos lineas de codigo para que se cargue GSAP y ScrollTrigger y poder utilizarlos para agregar animaciones. Estas dos librerias se necesitan bajar de https://greensock.com/

<>Cargar gsap.min.js


wp_enqueue_script( 'gsap', plugin_dir_url( __FILE__ ). 'assets/js/gsap.min.js', '','', true );

<>Cargar ScrollTrigger.min.js


wp_enqueue_script( 'ScrollTrigger', plugin_dir_url( __FILE__ ) . 'assets/js/ScrollTrigger.min.js', '','', true );true );

Cargar librerias Descargadas

Oxy How To Oxygen Builder
Por medio de un cliente FTP o del administrador de archivos que proporciona el provedor de hosting cargamos las librerias GSAP y ScrollTrigger  en /wp-content/plugins/my-custom-functionality-master/assets/js 
Oxygen Builder How To

gsap.registerPlugin(ScrollTrigger);

gsap.to("#image-80-952", {
    duration: 2.5,
    ease: "bounce.out",
    rotate: 360,
    x: 100,
    scrollTrigger: {
        trigger: "#image-80-952",
        start: "bottom bottom",
        end: "bottom top",
    }
});

You like me?
Take a second to support us on PayPal or Patreon!

Oxy How To Oxygen Builder
If you have any suggestions, please let us know
suggestions

You can share it on: