Greensock(GSAP 3) ::: Proper WordPress 5 Integration and Enqueuing

In order to properly load GSAP 3 with WordPress 5, we need to create a custom file for our code with these onload event listeners:

App.js
// 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);
});

Make sure to observe output of console for correct text.

Functions.php

< ? php
// The proper way to enqueue GSAP script in WordPress
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script(){
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js', array(), false, true );
wp_enqueue_script( 'gsap-js2', get_template_directory_uri() . 'js/app.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

Sources

WordPress 5 integration

Wp_enqueue_script()