Jump to content
Search Community

WordPress 5 integration

Gianluca Giurlando test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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-js2', 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 5
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-custom', 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 5
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

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

  • 4 months later...
On 2/25/2019 at 10:48 AM, Jonathan said:

 


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

 

 

This didn't actually work for me - not sure if anyone else is having the same issue.

 

 I tweaked the second row from gsap-js, to gsap-script and it started working straight away!

 

    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-script', get_stylesheet_directory_uri() . '/js/gsap-scripts.js', array(), false, true );

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hey there, newbie here,

 

I'm not pulling it all together very well from this thread. I've loaded Wordpress Ver 5 and want to use the GSAP Ver 3  CDN as well as the Morph plugin.

I'm using the Hello Elementor Child Theme. It seems to load the Elementor (parent)  style.css AFTER my custom style.css, which is another layer of complexity not related to GSAP.

Also, there is no GSAP plugin required, correct?

Link to comment
Share on other sites

Hey Yaya, thanks for being a Shockingly Green member.

 

17 hours ago, Yaya said:

there is no GSAP plugin required, correct?

Correct, there is no WordPress GSAP plugin.

 

17 hours ago, Yaya said:

I'm not pulling it all together very well from this thread. I've loaded Wordpress Ver 5 and want to use the GSAP Ver 3  CDN as well as the Morph plugin.

What issue(s) are you having? It would be good to include the error and the related code you're using to import GSAP. For the MorphSVGPlugin you'll need to upload it to your server and call it differently than the CDN.

Link to comment
Share on other sites

On 11/5/2019 at 6:23 PM, jake-adams said:

 

This didn't actually work for me - not sure if anyone else is having the same issue.

 

 I tweaked the second row from gsap-js, to gsap-script and it started working straight away!

 


    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-script', get_stylesheet_directory_uri() . '/js/gsap-scripts.js', array(), false, true );

 

On 2/25/2019 at 10:00 PM, Jonathan said:

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-js2', 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!

 

Thank you jake jake-adams - you helped me a lot. I am grateful. I knew it was a scripting issue with wordpress. Been looking for this answer everywhere. Nowhere on the internet can you find the correct way. ONCE AGAIN - AMAZING JOB.  Issue Solved. 

Link to comment
Share on other sites

  • 2 months later...

Hi Guys!

I have similar issue using image parallax with mouse interactions. 

I want to replicate this codepen 

See the Pen JJbXod by oceaniclife (@oceaniclife) on CodePen

 but in WordPress.

 

So far I changed it like that, as I usually do with most scripts that don't want to work with WP:

jQuery(document).ready.parallax = function(resistance, mouse) {
  $el = $(this);
  TweenLite.to($el, 0.2, {
    x: -((mouse.clientX - window.innerWidth / 2) / resistance),
    y: -((mouse.clientY - window.innerHeight / 2) / resistance)
  });
};


jQuery(document).ready(function () {

jQuery(document).mousemove(function(e) {
  jQuery(".ny-background").parallax(-30, e);
  jQuery(".ny-background-color").parallax(10, e);

});
});

 

However, I'm getting this error:

script.js?ver=5.3.2:26 Uncaught TypeError: jQuery(...).parallax is not a function
    at HTMLDocument.<anonymous> (script.js?ver=5.3.2:26)

Line 26 is  jQuery(".ny-background").parallax(-30, e);

 

I can't get it to work with WordPress and it drives me mad :)

 

Any help will be appreciated.

Link to comment
Share on other sites

Hey @krzysiekh and welcome to the GreenSock forums! 

 

This isn't really a GSAP question... but it looks like you're attaching the parallax function to the ready function for some reason. Try this instead (like what the demo that you link to uses):

jQuery.fn.parallax = function(resistance, mouse) {

Also, we highly recommend using GSAP 3! It's a smaller file size, has new features, and has a sleeker API. 

  • Like 1
Link to comment
Share on other sites

@ZachSaucier thanks a lot! It worked like a charm.

 

Here's a working code if anyone else will be in need:

 

jQuery.fn.parallax = function(resistance, mouse) {
  $el = jQuery(this);
  TweenLite.to($el, 0.2, {
    x: -((mouse.clientX - window.innerWidth / 2) / resistance),
    y: -((mouse.clientY - window.innerHeight / 2) / resistance)
  });
};


jQuery(document).ready(function () {

jQuery(document).mousemove(function(e) {
  jQuery(".ny-background").parallax(-30, e);
  jQuery(".ny-background-color").parallax(10, e);

});
});

 

Link to comment
Share on other sites

  • 8 months later...

First order of business, Hello everyone! I'm new here and a pretty active Wordpress User/Builder

 

There are a several wordpress plugins using some of the GSAP libraries. 2 that haven't been maintained since last year (LivIcons Evolution and AnimateWP from codecanyon) and there are right now 2 recent plugins fully compatible with wp 5.3 in the WP repository and plugin pages.

Advanced WordPress Backgrounds, found here: https://wordpress.org/plugins/advanced-backgrounds/

  and 

Scrollsequence – Fullpage Scroll Image Animation Plugin, found here: https://wordpress.org/plugins/scrollsequence/

 

Revolution Slider and Kreatura LayerSlider have both had code fixes for GSAP (I'm assuming gsap3 by the dates) about 2 build versions back according to both of their changelogs.

 

There is also a write up and GIT about creating a custom plugin to add sitewide support for GSAP, 

Article: https://medium.com/@pixeldroid/gsap-in-wordpress-9e5771a059a 

Accompanying plugin template: https://github.com/eightbit/eightbit-resources/blob/master/GSAP-in-WordPress.zip

 

Last of all is another article saying this is the right way to add gsap3 support (Of course, without the codepen only plugins,, obviously..):

https://www.owlasylum.net/downloadthisweb/greensockgsap-3-proper-wordpress-5-integration-and-enqueuing/

 

The simplest and best option would be the very last link. Less of a chance of having to redo anything due to a template or plugin update if you were to add code to either. I haven't tested any of it yet since  I've only today come across GSAP with codepen examples and had been looking to do more with Revolution Slider, Smart Slider 3 or Kreatura LayerSlider (animations, text effects etc..). I had already replicated all my slides into the others incase I had to change to one of them so if I had to switch, it wouldn't be a big deal. Cheers all!

 

**Edit**

Almost forgot about the new c9 blocks plugin for the WP Gutenberg editor, Article: https://www.covertnine.com/c9-blocks-plugin/

GIT: https://github.com/covertnine/c9-blocks

  • 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.
×
×
  • Create New...