WordPress 5 integration

[Gianluca Giurlando 0 Likes (Newbie)]

Hi everyone,

 

I`m completely new to GreenSock and I`d like to learn how to integrate it in WordPress 5. I'm working on a WP website and I'm developing my own child theme. I found an old forum post, dating back from 2016 and I`d like to know whether the instructions are still valid.  According to that old post, the steps are:

1. Add a functions.php file within my child theme to enqueue the JS script (my preference is to import it via the CDN link).
2. Create a "custom scripts" directory within my child theme and save there my custom script (in the old post this file was called my custom-gsap-scripts.js
3. Use the custom script file to run my tweens.

Is this solution still valid and could someone post the actual code here?

Many thanks in advance for your help,

Gianluca

[Jonathan 5,176 Likes (Superhero)]

Hi @Gianluca Giurlando and welcome to the GreeenSock Forum!

 

Yes that is still valid.

 

On the frontend of your website, check the browser dev tools Network panel and make sure your GSAP CDN script is being run/loaded before your custom GSAP script JS file. This way your custom code runs after GSAP is already loaded

 

Also you might have to add a DOM ready event and window load event to make sure your code is running when the HTML markup (DOM) and window is fully loaded.

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  console.log("DOM loaded");
  
  // wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function(e) {
    
    // custom GSAP code goes here
     console.log("window loaded");
    
  }, false);
  
});

 

Check your dev tools console to make sure you see those output console logs.

 

<?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', get_template_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

 

The link to the WordPress Codex for enqueuing JS files:

 

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

 

For easy reference:

 

 

Happy Tweening!

[pixeldroid 27 Likes (Newbie)]

This might be helpful.

[Jonathan 5,176 Likes (Superhero)]

Keep in mind that if you have your custom GSAP script inside your child theme directory, then you have to use the below code instead:

 

Reason being is that

• get_template_directory_uri() returns the path to your parent theme
• get_stylesheet_directory_uri() returns the path to your child theme

<?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', get_stylesheet_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

 

/js/ being the js folder in your child theme.

 

Happy Tweening

[dee 0 Likes (Newbie)]

Hello everyone,

This is my first post on the forum I'm new to GSAP.
I'm trying to implement DrawSVG has a logo on Wordpress everything seems to load according to print screen I'm a bit stuck would appreciate ideas or help for this.

this is my pen 

See the Pen mYgRLZ by pixosesos (@pixosesos) on CodePen

I'm using an existing theme and working in a child theme.
Cheers Dylan

[GreenSock 8,117 Likes (Superhero)]

Hi @dee. Welcome to the forums. Can you clarify what your GSAP-related question is? I didn't quite understand. What exactly are you stuck on? 

[Visual-Q 586 Likes (Leader)]

Yeah there's any number of things that could be behind an issue especially in Wordpress, not to mention we don't even know what the issue is. Please clarify.

 

Are you getting any errors.

 

I notice you're using jQuery. If the scripts are loading properly but it's not finding the element it could be related to wordpress running jquery in no conflict mode. In this case use jQuery not $ or better yet don't use it and let gsap find the element. More info about this in STOV link.

 

https://stackoverflow.com/questions/21948053/custom-jquery-function-not-working-on-wordpress-even-though-other-loaded-jquery

 

[dee 0 Likes (Newbie)]

Thanks for the quick and efficient help, so I'm using Divi and a plugin to allow inline SVG called "SVG support".

Late answer I was working on the SVG responsiveness it's a bit better now but not perfect yet.

 

I changed the code as you said in noConflict and BIM it works DrawSVG in action. 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  console.log("DOM loaded");
  
  // wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function(e) {
    
    // custom GSAP code goes here
    var signyoli = jQuery.noConflict();
    TweenMax.staggerFromTo(signyoli('#mask-sig path'), 1.2, {drawSVG: "0%"}, {drawSVG: "100%"}, 1.2);
    
  }, false);
  
});

 

I get an error here and it seems it's not working on safari mac and iOs

Got still blink at the start of the animation the SVG shows up fully blinks and then the mask applies, so I'm curious about what you mean by "use jQuery not $ or better yet don't use it and let gsap find the element"? How would I let gsap find the element?

Thanks again,
Dylan

 

[Visual-Q 586 Likes (Leader)]

1 hour ago, dee said:

so I'm curious about what you mean by "use jQuery not $ or better yet don't use it and let gsap find the element"? How would I let gsap find the element?

 

Gsap does not require jQuery to find most DOM elements so you can just use:

 

TweenMax.staggerFromTo('#mask-sig path', 1.2, {drawSVG: "0%"}, {drawSVG: "100%"}, 1.2);

 

and jQuery can be accessed more reliably using jQuery instead of $ though the STOV post shows other solutions

 

TweenMax.staggerFromTo(jQuery('#mask-sig path'), 1.2, {drawSVG: "0%"}, {drawSVG: "100%"}, 1.2);

 

 

[Jonathan 5,176 Likes (Superhero)]

Hi @dee

 

10 hours ago, dee said:

I get an error here and it seems it's not working on safari mac and iOs

 

If the error is coming from custom.min.js on Line 118, you should go to that line number in that file. Then you can narrow down what triggered that error