Wordpress Integraton

[brandpirate]

Hi everyone,

 

I want to start using gsap with wordpress, but it doesnt seem to work. What am I doing wrong?
 

I use a child theme (with Enfold). This childtheme contains a file called functions.php with (only) the following content:

 

<?php

// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {

 //wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js', array(), false, true );
 wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js', array(), false, true );
 wp_enqueue_script( 'gsap-js2', get_template_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

?>

 

In my child-theme I made a folder called "js" and putted a file called "custom-gsap-scripts.js" in it with the following content:

gsap.to(".testimage", {duration: 2, x: 500});

In my wordpress I linked this testimage to the following way. The Image appears - but no animation so far:

<img class="testimage" src="/wp-content/uploads/2021/04/content.png" alt="" width="500" height="500" />

 

[mvaneijgen]

There is a difference between `get_template_directory_uri()` and `get_stylesheet_directory_uri()`.

 

`get_template_directory_uri()` always gets the parent theme directory

 

`get_stylesheet_directory_uri()` get the directory of the current theme (eg the child theme directory)

 

maybe this is your issue, but it hard to tell with out seeing a live demo

[brandpirate]

Works! Thanks a lot! ❤️

[Davide Lakka]

Hello lads,
first of all I apologize for my little knowledge of php.
I added gspa to a project that I am carrying out, through the function.php of Hello Elementor child theme adding this simple code:

 

function wpb_adding_scripts(){
    
    wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js', array(), '1.0', true );
  
    wp_register_script( 'gsap-settings', get_stylesheet_directory_uri() .'/gsap.js', array('gsap'), '1.0', true );

    wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both
    wp_enqueue_script('gsap-settings');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

 

and it works.

 

But the problem is that I can't add Scroll Trigger, and therefore all the functionality of this extra plugin via cdn in this function.

 

Can anyone help me?

 

Thanks, Davide

[mvaneijgen]

@Davide Lakka ScrollTrigger is a plugin for GSAP and is its own file, so if you want to use ScrollTrigger you also need to load and enqueue it. 

 

Take a look at the installation guide https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger here you can see what you all need if you want certain functions, it is not specific to Wordpress, but it does show you what files to load.

 

Btw it's better to start your own topic if you have a question.

[Davide Lakka]

Hi mvaneijgen, thank you for your answer, I am not familiar with php, I tried to load and also queue ScrollTrigger in the same destination, but surely I am wrong something in writing the function. Could you help me?

Thanks again,

David

[Rodrigo]

Hi @Davide Lakka,

 

You already started a new thread for this, please keep the questions related to this issue on that particular thread, thanks: