Wordpress Integration

[shailendra.khandewale]

Hi Guys ,

 

This is my first time using Tween. I need help with integration of Tween inside my WordPress Theme. I have already necessary js files using  wp_enqueue_script inside function.php.

But I am confused how and where to use and wrrite scrips such as 

<script>

TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}), or any tweens.

</script>

 

[Jonathan]

Hello shailendra.khandewale and Welcome to the GreenSock Forum!

 

If you are developing a WordPress theme or customizing a WordPress theme, you can add your JS file within your WordPress functions.php file. Add this to your functions.php file

<?php
// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
    wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/wp-content/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

The last parameter shows true which means WordPress will add the JS file to the footer instead of in the head,

 

Here is the link for more information on enqueuing JS files in WordPress:

 

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

 

You can see that right after TweenMax.min.js, that I am adding my custom-gsap-scripts.js script so this way it is added right after TweenMax.

 

Your custom code should look like this:

<script>
// wait until DOM is ready before running using jQuery ready() method
$(document).ready(function(){
   
     // run your custom code
     TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}), or any tweens.

});
</script>

Hope this helps!

[Deven]

Does whether the CDN is called from http or https?  The docs on your GitHub use HTTPS.

[Jonathan]

Hello Deven

 

You can use both.. or even none like this:

 

Using secure https:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Using unsecure http:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Using agnostic //, protocol wont matter it can work on both https or http:

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Any one of the three above ways will work. It just depends what protocol is being used on your webpage or website.