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:

// 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.


< ? 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', '', 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' );


WordPress 5 integration