Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pixeldroid

GSAP sitewide in WordPress?

Recommended Posts

Hi All:

I would like to install gsap into our WordPress site so I can call it from any page.
For Example.
In a WP page, I have

<div id="myDiv"> I'm a big dumb Div</div>

and in the scripts section, before the closing body tag:

<script>
TweenLite.from("#myDiv", 2, {opacity:0, delay:0.5});
</script>


I'm using a "Functionality Plugin" which is a single plugin file which is used to organize/load custom plugins.
The setup is thus:
in mu-plugins/functionality-plugin.php, I have:
 

if ( ! defined( 'FUNC_PLUGIN_URL' ) ) {
    define( 'FUNC_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
}
include( FUNC_PLUGIN_DIR . 'includes/load_gsap.php' );


In includes/load_gsap.php, I have tried to load gsap both locally and via cdn:

function theme_gsap_script() {
    wp_enqueue_script( 'gsap-js', FUNC_PLUGIN_URL . 'js/TweenLite.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );


Unfortunately, when I load the page, I get
Uncaught ReferenceError: TweenLite is not defined

Help will be appreciated!

Link to comment
Share on other sites

Progress!

I'm past the Reference Error.

TweenLite is loading, but the div is not animating.

I've beefed up the script, but no go:

<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("aa");
var theDiv= document.querySelector('#myDiv');
 TweenLite.from(theDiv, 1, {left:-200, rotation:-90, scale:0, delay:1.5});
});
</script>

 

console: myDiv:

<div id="myDiv"> I'm a big Div</div>

 

Hmmm:?

Link to comment
Share on other sites

If you want to animate anything CSS-related, you need to load CSSPlugin. Or just load TweenMax which has all the common tools and plugins (both TweenLite and CSSPlugin are in there). 

 

CSSPlugin:

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSPlugin.min.js

 

TweenMax: 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js

 

Oh, and you don't have to use that querySelector() stuff - GSAP has it built in. So you can simply do this: 

TweenLite.from("#myDiv", 1, {left:-200, rotation:-90, scale:0, delay:1.5});

 

Does that help?

  • Like 3
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.
×