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.

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