GSAP in Wordpress

[adbites]

After 4 hours of trying to get GSAP running on a Wordpress site I have to ask for help. Whenever I used GSAP in the past I called the needed js files in the footer. The new project by a friend of mine has all the js files enqueued in the functions php. I just added TweenMax and my customs.js. Both of them are self hosted and not called via cdn.

 

I see no error messages and GSAP and my custom script seem to get loaded well. However, the animations are not played in the frontend and I guess I made something wrong. 

 

This is how the scripts are enqueued via functions.php:

/**
 * Load site scripts.
 */
function bootstrap_theme_enqueue_scripts() {
	$template_url = get_template_directory_uri();

	// jQuery.
	// if (!is_admin())   
    //{  
    //    wp_deregister_script('jquery');  
  
        // Load a copy of jQuery from the Google API CDN  
        // The last parameter set to TRUE states that it should be loaded  
        // in the footer.  
        //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', FALSE, '1.12.4', TRUE);  
  
 //       wp_enqueue_script('jquery');  
//    }  


	// Bootstrap
	wp_enqueue_script( 'bootstrap-script', $template_url . '/js/bootstrap.min.js', array( 'jquery' ), null, true );
	wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/5d03a56eda.js', array(), null, true );
	wp_enqueue_script( 'wow', $template_url . '/js/wow.min.js', array( 'jquery' ), null, true ); 
	//wp_enqueue_script( 'js-cookie', $template_url . '/js/js.cookie.min.js', array(), null, true );
	wp_enqueue_script( 'js-functions', $template_url . '/js/functions.js', array( 'jquery' ), null, true ); 
	wp_enqueue_script( 'gsap-js', $template_url . '/js/TweenMax.min.js', array(), false, true );
	wp_enqueue_script( 'css-plugin', $template_url . '/js/CSSPlugin.min.js', array(), false, true );
	wp_enqueue_script( 'split-text', $template_url . '/js/SplitText.min.js', array(), false, true );
	wp_enqueue_script( 'draw-svg', $template_url . '/js/DrawSVGPlugin.min.js', array(), false, true );
	wp_enqueue_script( 'custom-gs', $template_url . '/js/customgs.js', array(), false, true );
	
	
	
	
	
	
	
	if ( is_single() ) {
	// Carousel
	wp_enqueue_script( 'jcarousel-script', $template_url . '/js/jquery.jcarousel.js', array( 'jquery' ), null, true );
	wp_enqueue_script( 'jcarousel-responsive', $template_url . '/js/jcarousel.responsive.js', array( 'jquery' ), null, true );
	}


	wp_enqueue_style( 'bootstrap-style', $template_url . '/css/bootstrap.min.css' );
	wp_enqueue_style( 'animate-style', $template_url . '/css/animate.css' );
	//wp_enqueue_style( 'ihover-style', $template_url . '/css/ihover.min.css' );

	//Main Style
	wp_enqueue_style( 'main-style', get_stylesheet_uri() );

	// Load Thread comments WordPress script.
	//if ( is_singular() && get_option( 'thread_comments' ) ) {
	//	wp_enqueue_script( 'comment-reply' );
	//}
}

add_action( 'wp_enqueue_scripts', 'bootstrap_theme_enqueue_scripts', 1 );

And this is my timeline in my customgs.js

jQuery(document).ready(function($) {


var $slidehead = $('.socialicons'),       
    tl = new TimelineLite();

tl.set(".socialicons", {visibility:"visible"})
	.from($slidehead, 2.5, {scale:0.2, autoAlpha: 0, ease:Back.easeIn});
	
	
	
});

Any help is welcome. Thank's in advance and greetings from a german GSAP noob

 

[adbites]

Problem solved. There was a self produced error with the names of classes and IDs in the Wordpress template files. The posted code of my initial post seems to be right and maybe helpful for some of the readers.

[PointC]

Glad to hear you got it figured out adbites.

 

...and welcome to the GreenSock forums.