Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gianluca Giurlando

WordPress 5 integration

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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

<?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 :)

  • Like 3
Link to comment
Share on other sites

  • 3 months later...

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

Capture d’écran 2019-06-05 à 13.11.00.png

Capture d’écran 2019-06-05 à 13.11.26.png

Capture d’écran 2019-06-05 à 13.13.04.png

Capture d’écran 2019-06-05 à 14.10.08.png

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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

 

  • Thanks 1
Link to comment
Share on other sites

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

1988184760_Capturedecran2019-06-07a15_46_03.thumb.png.edfc9550b175dd1ef74133e645534286.png


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

 

Link to comment
Share on other sites

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);

 

 

  • Like 2
Link to comment
Share on other sites

Hi @dee

 

10 hours ago, dee said:

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

1988184760_Capturedecran2019-06-07a15_46_03.thumb.png.edfc9550b175dd1ef74133e645534286.png

 

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 :)

  • Like 2
  • Thanks 1
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.
×