Jump to content
Search Community

Using GSAP in wordpress child theme

Natalie test
Moderator Tag

Recommended Posts

Hi, I am not a javascript expert but I need to add Greensock Tweenmax to my wordpress website via my Child Theme. I've seen so many different sources explaining different ways of doing this but none have worked. Can anyone explain this OR send me to a resource that's going to work for me?

 

Right now I have installed this code into my <body> tag:

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

 

And this into <footer>:

<script  src="<?php echo get_template_directory_uri(); ?>/app.js"></script>

 

I created a new file in my child theme folder called app.js,

 

and in my child theme functions.php, tried to encue it as so:

 

function my_custom_scripts() {
    wp_enqueue_script( 'app-js', get_stylesheet_directory_uri() . '/app.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

 

Link to comment
Share on other sites

15 minutes ago, Natalie said:

Hi, I am not a javascript expert but I need to add Greensock Tweenmax to my wordpress website via my Child Theme. I've seen so many different sources explaining different ways of doing this but none have worked. Can anyone explain this OR send me to a resource that's going to work for me?

 

Right now I have installed this code into my <body> tag:

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

 

And this into <footer>:

<script  src="<?php echo get_template_directory_uri(); ?>/app.js"></script>

 

I created a new file in my child theme folder called app.js,

 

and in my child theme functions.php, tried to encue it as so:

 

function my_custom_scripts() {
    wp_enqueue_script( 'app-js', get_stylesheet_directory_uri() . '/app.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

 

 

 

EDIT: This is what my Dev Tools says.

Annotation 2020-04-04 161127.png

Link to comment
Share on other sites

I'm not much of a WordPress user but that error strikes me as odd. You're loading gsap 3.2.6, but the error says TimelineMax is not defined? I would have expected the error to say gsap is not defined

 

I wish I could be of more help, but I just don't have a WP background. Maybe someone with more WordPress expertise will pop up with some ideas. There are other threads about this topic throughout the forum too. If you use the search feature, you should find some additional info that may be helpful.

 

  • Like 1
Link to comment
Share on other sites

Quote

 

Right now I have installed this code into my <body> tag:

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

 

Are you 100% positive? And was that GSAP file loaded BEFORE the code that references TimelineMax? Did you check the source of the page that's displaying that error (I mean in the browser, right click, view source)? If you are indeed loading that on a page then TimelineMax will be defined (after it's loaded of course). So it's either an order issue (you're referencing TimelineMax before the file loads) or you're not loading GSAP or maybe the code that's looking for TimelineMax is in a different iframe or something, thus it doesn't have access to GSAP from that page. Very difficult to troubleshoot blind. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...