GSAP sitewide in WordPress?

[pixeldroid]

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!

[pixeldroid]

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

[GreenSock]

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?