Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
adbites

GSAP in Wordpress

Recommended Posts

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 ;-)

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Glad to hear you got it figured out adbites.

 

...and welcome to the GreenSock forums.

:)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×